/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-4c573f80]::after {
  content: '';
  display: block;
  clear: both;
}
#container[data-v-4c573f80] {
  position: relative;
  width: 800px;
  height: 240px;
}
.frame[data-v-4c573f80] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  width: 800px;
  height: 240px;
  position: absolute;
  cursor: pointer;
  -webkit-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.info[data-v-4c573f80] {
  position: absolute;
  top: 100%;
  text-align: center;
  width: 100%;
}
.info .title[data-v-4c573f80] {
  cursor: pointer;
  display: inline-block;
  padding: 16px 0px;
  border-bottom: 1px solid #E8E8E8;
}
#button-left[data-v-4c573f80] {
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 48px;
  border: 1px solid #E8E8E8;
  position: absolute;
  top: calc(50% - 32px);
  left: -96px;
}
#button-right[data-v-4c573f80] {
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 48px;
  border: 1px solid #E8E8E8;
  position: absolute;
  top: calc(50% - 32px);
  right: -96px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-054ec55d]::after {
  content: '';
  display: block;
  clear: both;
}
.course-block-container[data-v-054ec55d] {
  width: 100%;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.course-block-container .cover[data-v-054ec55d] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  overflow: initial;
  width: 190px;
  height: 150px;
  float: left;
  margin-right: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border: 4px solid #FFFFFF;
}
.course-block-container .cover .cover-tips[data-v-054ec55d] {
  z-index: calc(10000 - 2000) !important;
}
.course-block-container .cover .is_hidden[data-v-054ec55d] {
  top: 0;
  left: 0;
}
.course-block-container .cover .is_hidden img[data-v-054ec55d] {
  width: 62px;
  height: 62px;
}
.course-block-container .info[data-v-054ec55d] {
  position: relative;
}
.course-block-container .info .title[data-v-054ec55d] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  padding-top: 8px;
}
.course-block-container .info .tag[data-v-054ec55d] {
  margin-left: 8px;
  height: 24px;
  position: relative;
  top: 4px;
}
.course-block-container .info .teacher[data-v-054ec55d] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.course-block-container .info .describe[data-v-054ec55d] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #9E9E9E;
  text-align: justify;
  margin-top: 16px;
  padding-right: 16px;
  line-height: 24px;
  overflow: hidden;
  max-height: 48px;
}
.course-block-container .info .details[data-v-054ec55d] {
  position: absolute;
  display: flex;
  align-items: center;
  left: 220px;
  bottom: 8px;
}
.course-block-container .info .details li[data-v-054ec55d] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  float: left;
  margin-right: 16px;
}
.course-block-container .info .details li .iconfont[data-v-054ec55d] {
  display: inline-block;
  margin-right: 8px;
}
.course-block-container .info .details li .text[data-v-054ec55d] {
  display: inline-block;
}
.course-block-container .info .details li .fg-line[data-v-054ec55d] {
  margin: 0 15px;
  height: 8px;
}
.course-block-container .info .details li .share[data-v-054ec55d] {
  display: inline-block;
}
.course-block-container .info .details li .divider[data-v-054ec55d] {
  display: inline-block;
  height: 8px;
  border: 1px solid #E8E8E8;
  margin-left: 16px;
}
.course-block-container .info[data-v-054ec55d]::after {
  content: "";
  display: block;
  clear: both;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-2cad988a]::after {
  content: '';
  display: block;
  clear: both;
}
.course-list-container .course[data-v-2cad988a] {
  margin: 0px auto;
  margin-bottom: 32px;
  width: 950px;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.course-list-container .course[data-v-2cad988a]:hover {
  transform: scale(1.01);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-1bcc4c46]::after {
  content: '';
  display: block;
  clear: both;
}
.container[data-v-1bcc4c46] {
  width: 100%;
  height: 100%;
}
.carousel[data-v-1bcc4c46] {
  width: 100%;
  height: 38.2%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}
.carousel canvas[data-v-1bcc4c46] {
  top: -80px;
  position: absolute;
  width: 100%;
  height: 61.8%;
}
.headline[data-v-1bcc4c46] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 24px;
}
.nb-input-container[data-v-1bcc4c46] {
  width: 240px;
  margin: 0px auto;
  margin-bottom: 32px;
}
.course-list[data-v-1bcc4c46] {
  margin-bottom: 48px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-27b03d3b]::after {
  content: '';
  display: block;
  clear: both;
}
.lightdot-container[data-v-27b03d3b] {
  position: relative;
  overflow: hidden;
}
.lightdot-container .information[data-v-27b03d3b] {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.lightdot-container .dot[data-v-27b03d3b] {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  opacity: 0.2;
  animation: move-data-v-27b03d3b 5s forwards cubic-bezier(1, 0, 0.6, 1);
}
@keyframes move-data-v-27b03d3b {
0% {
    left: -20%;
}
100% {
    left: 100%;
    opacity: 0;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-1c1adfc8]::after {
  content: '';
  display: block;
  clear: both;
}
.syllabus-container[data-v-1c1adfc8] {
  width: 480px;
  box-sizing: border-box;
  padding: 16px;
}
.syllabus-container .header[data-v-1c1adfc8] {
  width: 480px;
  height: 80px;
  line-height: 80px;
}
.syllabus-container .header img[data-v-1c1adfc8] {
  margin-left: 24px;
  display: inline-block;
  vertical-align: middle;
}
.syllabus-container .header h1[data-v-1c1adfc8] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-left: 24px;
}
.syllabus-container .content .category h1[data-v-1c1adfc8] {
  font-size: 14px;
  /* line-height: 14px; */
  font-weight: bold;
  margin: 0 24px;
  /* margin-top: 24px; */
  height: 40px;
  cursor: pointer;
  line-height: 40px;
  padding-left: 10px;
  border-radius: 10px;
}
.syllabus-container .content .category .h1_o[data-v-1c1adfc8]:hover {
  background: #F8F8F8;
}
.syllabus-container .content .lesson[data-v-1c1adfc8] {
  cursor: pointer;
  padding: 16px;
  padding-bottom: 0px;
}
.syllabus-container .content .lesson .title[data-v-1c1adfc8] {
  margin: 0px 16px;
}
.syllabus-container .content .lesson .describe p[data-v-1c1adfc8] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  line-height: 16px;
  margin: 0px 16px;
  margin-top: 8px;
  overflow: hidden;
  max-height: 48px;
  text-align: justify;
  vertical-align: middle;
}
.syllabus-container .content .lesson .describe .state[data-v-1c1adfc8] {
  margin: 0px 8px;
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 100%;
}
.syllabus-container .content .lesson .describe .state--1[data-v-1c1adfc8] {
  background: #E8E8E8;
  color: #9E9E9E;
}
.syllabus-container .content .lesson .describe .state-2[data-v-1c1adfc8] {
  background: #8BC34A;
  color: #FFFFFF;
}
.syllabus-container .content .lesson .describe .state-1[data-v-1c1adfc8] {
  background: #03A9F4;
  color: #9E9E9E;
  color: #FFFFFF;
}
.syllabus-container .content .lesson .displaystate p[data-v-1c1adfc8] {
  width: calc(100% - 80px);
}
.syllabus-container .content .lesson .nb-divider[data-v-1c1adfc8] {
  margin-top: 16px;
}
.syllabus-container .content .lesson[data-v-1c1adfc8]:hover {
  background: #F8F8F8;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-1007a5e1]::after {
  content: '';
  display: block;
  clear: both;
}
.attachment[data-v-1007a5e1] {
  margin-bottom: 16px;
}
.attachment .group[data-v-1007a5e1] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  margin-top: 8px;
  margin-bottom: 8px;
}
.attachment .attachment-type[data-v-1007a5e1] {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-size: cover;
  vertical-align: bottom;
}
.attachment .attachment-info[data-v-1007a5e1] {
  display: inline-block;
  margin-left: 16px;
}
.attachment .attachment-info .name[data-v-1007a5e1] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.attachment .attachment-info .name .iconfont[data-v-1007a5e1] {
  opacity: 0;
  color: #03A9F4;
  cursor: pointer;
  margin-left: 8px;
}
.attachment .attachment-info .name input[data-v-1007a5e1] {
  width: 80px;
}
.attachment .attachment-info .info[data-v-1007a5e1] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 4px;
}
.attachment .attachment-info .infoblock[data-v-1007a5e1] {
  margin-right: 8px;
}
.attachment .attachment-info:hover .iconfont[data-v-1007a5e1] {
  opacity: 1;
}
.attachment .attachment-controller[data-v-1007a5e1] {
  float: right;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-e2bdd0d4]::after {
  content: '';
  display: block;
  clear: both;
}
.practice-container .header[data-v-e2bdd0d4] {
  padding: 32px;
  padding-bottom: 0px;
}
.practice-container .header .header-icon[data-v-e2bdd0d4] {
  height: 40px;
  display: inline-block;
  vertical-align: middle;
}
.practice-container .header .header-content[data-v-e2bdd0d4] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 24px;
}
.practice-container .header .header-content .title[data-v-e2bdd0d4] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.practice-container .header .header-content .describe[data-v-e2bdd0d4] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.practice-container .header .header-refresh[data-v-e2bdd0d4] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  float: right;
  margin-top: 12px;
  margin-left: 48px;
  cursor: pointer;
}
.practice-container .header .header-refresh *[data-v-e2bdd0d4] {
  display: inline-block;
  vertical-align: middle;
}
.practice-container .header .nb-divider[data-v-e2bdd0d4] {
  margin-top: 24px;
}
.practice[data-v-e2bdd0d4] {
  padding: 16px 16px;
  margin-top: 8px;
  cursor: pointer;
}
.practice .practice-info[data-v-e2bdd0d4] {
  width: calc(100% - 180px);
  display: inline-block;
  margin-left: 16px;
}
.practice .practice-info .practice-title[data-v-e2bdd0d4] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  position: relative;
}
.practice .practice-info .required[data-v-e2bdd0d4] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  padding: 4px;
  background: #03A9F4;
  color: #FFFFFF;
  border-radius: 5px;
}
.practice .practice-info .practice-describe[data-v-e2bdd0d4] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
}
.practice .practice-controller[data-v-e2bdd0d4] {
  float: right;
  padding-right: 16px;
}
.practice .practice-controller .fix-position[data-v-e2bdd0d4] {
  margin-top: 8px;
}
.practice .practice-controller .nb-divider[data-v-e2bdd0d4] {
  height: 8px;
}
.practice .practice-controller .note[data-v-e2bdd0d4] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.practice .practice-controller .note .note-details[data-v-e2bdd0d4] {
  color: #03A9F4;
}
.practice .practice-controller .note .note-failed[data-v-e2bdd0d4] {
  color: #E91E63;
}
.practice .practice-controller .note .note-success[data-v-e2bdd0d4] {
  color: #8BC34A;
}
.practice .practice-controller .note .note-excellent[data-v-e2bdd0d4] {
  color: #FFC107;
}
.practice .practice-controller .icon[data-v-e2bdd0d4] {
  display: inline-block;
  vertical-align: middle;
}
.practice .practice-controller .icon .iconfont[data-v-e2bdd0d4] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  font-size: 16px;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 24px;
  text-align: center;
}
.practice .practice-controller .icon .icon-waiting[data-v-e2bdd0d4] {
  background: #F8F8F8;
  border: 1px solid #E8E8E8;
  color: #03A9F4;
  animation: rotate-data-v-e2bdd0d4 1s linear infinite;
}
.practice .practice-controller .icon .icon-doing[data-v-e2bdd0d4] {
  background: #F8F8F8;
  border: 1px solid #E8E8E8;
  color: #03A9F4;
  animation: rotate-data-v-e2bdd0d4 2s infinite cubic-bezier(1, 0, 0.6, 1);
}
.practice .practice-controller .icon .icon-failed[data-v-e2bdd0d4] {
  background: #E91E63;
  color: #FFFFFF;
}
.practice .practice-controller .icon .icon-success[data-v-e2bdd0d4] {
  background: #8BC34A;
  color: #FFFFFF;
}
.practice .practice-controller .icon .icon-excellent[data-v-e2bdd0d4] {
  background: #FFC107;
  color: #FFFFFF;
}
.practice[data-v-e2bdd0d4]:hover {
  background: #F8F8F8;
}
.practice[data-v-e2bdd0d4]:last-child {
  margin-bottom: 8px;
}
@keyframes rotate-data-v-e2bdd0d4 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@-webkit-keyframes rotate-data-v-e2bdd0d4 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-21085fbe]::after {
  content: '';
  display: block;
  clear: both;
}
.homework-details-container[data-v-21085fbe] {
  width: 720px;
  border-radius: 10px 10px 0 0;
}
.homework-details-container .header[data-v-21085fbe] {
  background-image: url(/./assets/assets_example_image.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px 10px 0 0;
}
.homework-details-container .header .mask[data-v-21085fbe] {
  overflow: hidden;
  background: rgba(68, 68, 68, 0.75);
  color: #FFFFFF;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
.homework-details-container .header .mask .title[data-v-21085fbe] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin-top: 48px;
}
.homework-details-container .header .mask .description[data-v-21085fbe] {
  width: 60%;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 16px;
  margin-bottom: 48px;
  box-sizing: border-box;
  line-height: 24px;
}
.homework-details-container .divider[data-v-21085fbe] {
  width: 120px;
  margin: 0px auto;
}
.homework-details-container .button-group[data-v-21085fbe] {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 48px;
}
.homework-details-container .button-group .nb-button[data-v-21085fbe] {
  width: 180px;
}
.homework-details-container .info-block[data-v-21085fbe] {
  padding: 24px 16px;
  background: #F8F8F8;
  text-align: left;
}
.homework-details-container .info-block .item[data-v-21085fbe] {
  display: inline-block;
  vertical-align: middle;
}
.homework-details-container .info-block .key[data-v-21085fbe] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.homework-details-container .info-block .value[data-v-21085fbe] {
  margin-top: 8px;
}
.homework-details-container .info-block .nb-divider[data-v-21085fbe] {
  margin: 0px 32px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}
.homework-details-container .info-block .button-grouop[data-v-21085fbe] {
  float: right;
}
.homework-details-container .info-block .progress[data-v-21085fbe] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  background: #03A9F4;
  color: #FFFFFF;
  padding: 8px;
  margin-left: -8px;
  border-radius: 5px;
}
.homework-details-container .content-block[data-v-21085fbe] {
  margin: 24px 0px;
}
.homework-details-container .subtitle[data-v-21085fbe] {
  text-align: left;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-top: 32px;
  margin-left: 32px;
  margin-bottom: 24px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.homework-result-container {
  width: 720px;
  padding: 32px;
}
.homework-result-container .header {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.homework-result-container .header p {
  display: inline-block;
  vertical-align: middle;
}
.homework-result-container .header .result-failed {
  color: #E91E63;
}
.homework-result-container .header .result-failed .iconfont {
  background: #E91E63;
}
.homework-result-container .header .result-success {
  color: #8BC34A;
}
.homework-result-container .header .result-success .iconfont {
  background: #8BC34A;
}
.homework-result-container .header .result-excellent {
  color: #FFC107;
}
.homework-result-container .header .result-excellent .iconfont {
  background: #FFC107;
}
.homework-result-container .header .iconfont {
  display: inline-block;
  vertical-align: middle;
  color: #FFFFFF;
  padding: 8px;
  margin-right: 8px;
  border-radius: 100%;
}
.homework-result-container .nb-divider {
  margin: 32px 0px;
}
.homework-result-container .note {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-bottom: 8px;
}
.homework-result-container .button-group {
  text-align: center;
}
.homework-result-container .button-group .nb-button {
  width: 120px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-8490b352]::after {
  content: '';
  display: block;
  clear: both;
}
.finish-learning-container[data-v-8490b352] {
  width: 480px;
  text-align: center;
  padding-bottom: 16px;
}
.finish-learning-container .congratulation[data-v-8490b352] {
  margin-top: -103px;
}
.finish-learning-container h1[data-v-8490b352] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin-top: 32px;
}
.finish-learning-container p[data-v-8490b352] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 16px;
}
.finish-learning-container .nb-button[data-v-8490b352] {
  margin-top: 24px;
  width: 180px;
}
.finish-learning-container .nb-divider[data-v-8490b352] {
  width: 120px;
  margin: 0px auto;
  margin-top: 24px;
}
.finish-learning-container .course[data-v-8490b352] {
  display: inline-block;
  margin-right: 16px;
  margin-top: 16px;
  margin-bottom: 32px;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.finish-learning-container .course .cover[data-v-8490b352] {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 16px;
  border-radius: 4px;
  width: 128px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.finish-learning-container .course .title[data-v-8490b352] {
  max-width: 128px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 16px;
  color: #444444;
}
.finish-learning-container .course[data-v-8490b352]:last-child {
  margin-right: 0px !important;
}
.finish-learning-container .course[data-v-8490b352]:hover {
  transform: translate(0px, -8px);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-4b444fea]::after {
  content: '';
  display: block;
  clear: both;
}
.header[data-v-4b444fea] {
  padding: 32px;
  padding-bottom: 0px;
}
.header .header-icon[data-v-4b444fea] {
  height: 40px;
  display: inline-block;
  vertical-align: middle;
}
.header .header-content[data-v-4b444fea] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 24px;
}
.header .header-content .title[data-v-4b444fea] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.header .header-content .describe[data-v-4b444fea] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.header .header-refresh[data-v-4b444fea] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  float: right;
  margin-top: 12px;
  margin-left: 48px;
  cursor: pointer;
}
.header .header-refresh *[data-v-4b444fea] {
  display: inline-block;
  vertical-align: middle;
}
.header .nb-divider[data-v-4b444fea] {
  margin-top: 24px;
}
.content[data-v-4b444fea] {
  padding: 24px;
  box-sizing: border-box;
}
.nodata[data-v-4b444fea] {
  text-align: center;
  color: #9E9E9E;
  font-size: 12px;
  height: 32px;
}
.nodata span[data-v-4b444fea] {
  display: inline-block;
  height: 100%;
  line-height: 32px;
}
.nodata span i[data-v-4b444fea] {
  font-size: 32px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-04094a2b]::after {
  content: '';
  display: block;
  clear: both;
}
.nodata[data-v-04094a2b] {
  text-align: center;
  color: #9E9E9E;
  font-size: 12px;
  height: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.nodata span[data-v-04094a2b] {
  display: inline-block;
  height: 100%;
  line-height: 32px;
}
.nodata span i[data-v-04094a2b] {
  font-size: 32px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-0bd93016]::after {
  content: '';
  display: block;
  clear: both;
}
.bottom-card-container[data-v-0bd93016] {
  text-align: left;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 16px;
  border-radius: 5px;
  position: fixed;
  bottom: 32px;
  left: calc(50% - 640px / 2);
  width: 640px;
  height: 81px;
  background: #FFFFFF;
  z-index: 100;
}
.bottom-card-container .block[data-v-0bd93016] {
  width: 100%;
  height: 100%;
  position: relative;
}
.bottom-card-container img[data-v-0bd93016] {
  height: 81px;
}
.bottom-card-container .title[data-v-0bd93016] {
  position: absolute;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #8BC34A;
  left: 120px;
  top: 32px;
}
.bottom-card-container .nb-button[data-v-0bd93016] {
  position: absolute;
  right: 24px;
  top: 21px;
}
.bottom-card-container .stripe[data-v-0bd93016] {
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  height: 200px;
  width: 48px;
  top: -32px;
  left: -64px;
  transform: rotate(15deg);
  animation: kirakira-data-v-0bd93016 3s infinite;
  -webkit-animation: kirakira-data-v-0bd93016 3s infinite;
}
@keyframes kirakira-data-v-0bd93016 {
0% {
    left: -64px;
}
90% {
    left: 100%;
}
100% {
    left: 100%;
}
}
@-webkit-keyframes kirakira-data-v-0bd93016 {
0% {
    left: -64px;
}
90% {
    left: 100%;
}
100% {
    left: 100%;
}
}
.fade-enter-active[data-v-0bd93016],
.fade-leave-active[data-v-0bd93016] {
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.fade-enter[data-v-0bd93016],
.fade-leave-to[data-v-0bd93016] {
  opacity: 0;
  transform: translate(0px, 50px);
}

@font-face {
  font-family: fontello;
  src: url(/fonts/fontello.eot);
  src: url(/fonts/fontello.eot#iefix) format("embedded-opentype"), url(/fonts/fontello.woff2) format("woff2"), url(/fonts/fontello.woff) format("woff"), url(/fonts/fontello.ttf) format("truetype"), url(/./assets/D:_node-pc-pro_change-web-pc_node_modules_mavon-editor_dist_font_fontello.svg#fontello) format("svg");
  font-weight: 400;
  font-style: normal;
}
[class*=" fa-mavon-"]:before,
[class^=fa-mavon-]:before {
  font-family: fontello;
  font-style: normal;
  font-weight: 400;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-mavon-bold:before {
  content: "\E800";
}
.fa-mavon-italic:before {
  content: "\E801";
}
.fa-mavon-thumb-tack:before {
  content: "\E802";
}
.fa-mavon-link:before {
  content: "\E803";
}
.fa-mavon-picture-o:before {
  content: "\E804";
}
.fa-mavon-repeat:before {
  content: "\E805";
}
.fa-mavon-undo:before {
  content: "\E806";
}
.fa-mavon-trash-o:before {
  content: "\E807";
}
.fa-mavon-floppy-o:before {
  content: "\E808";
}
.fa-mavon-compress:before {
  content: "\E809";
}
.fa-mavon-eye:before {
  content: "\E80A";
}
.fa-mavon-eye-slash:before {
  content: "\E80B";
}
.fa-mavon-question-circle:before {
  content: "\E80C";
}
.fa-mavon-times:before {
  content: "\E80D";
}
.fa-mavon-align-left:before {
  content: "\E80F";
}
.fa-mavon-align-center:before {
  content: "\E810";
}
.fa-mavon-align-right:before {
  content: "\E811";
}
.fa-mavon-arrows-alt:before {
  content: "\F0B2";
}
.fa-mavon-bars:before {
  content: "\F0C9";
}
.fa-mavon-list-ul:before {
  content: "\F0CA";
}
.fa-mavon-list-ol:before {
  content: "\F0CB";
}
.fa-mavon-strikethrough:before {
  content: "\F0CC";
}
.fa-mavon-underline:before {
  content: "\F0CD";
}
.fa-mavon-table:before {
  content: "\F0CE";
}
.fa-mavon-columns:before {
  content: "\F0DB";
}
.fa-mavon-quote-left:before {
  content: "\F10D";
}
.fa-mavon-code:before {
  content: "\F121";
}
.fa-mavon-superscript:before {
  content: "\F12B";
}
.fa-mavon-subscript:before {
  content: "\F12C";
}
.fa-mavon-header:before {
  content: "\F1DC";
}
.fa-mavon-window-maximize:before {
  content: "\F2D0";
}
.markdown-body strong {
  font-weight: bolder;
}
.markdown-body .hljs-center {
  text-align: center;
}
.markdown-body .hljs-right {
  text-align: right;
}
.markdown-body .hljs-left {
  text-align: left;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-6f2c9fd2]::after {
  content: '';
  display: block;
  clear: both;
}
.mavon-editor-change-cintainer[data-v-6f2c9fd2] {
  z-index: 0 !important;
}
.mavon-editor-change-cintainer #mavon-editor-change-cintainer[data-v-6f2c9fd2] {
  width: 100%;
  height: 100%;
}
.mavon-editor-change-cintainer #mavon-editor-change-cintainer[data-v-6f2c9fd2] .v-note-edit {
  height: 300px;
  overflow-y: scroll;
}
.mavon-editor-change-cintainer #mavon-editor-change-cintainer[data-v-6f2c9fd2] .v-note-wrapper {
  z-index: 0 !important;
  min-height: 120px;
}
.mavon-editor-change-cintainer #mavon-editor-change-cintainer[data-v-6f2c9fd2] .markdown-body {
  z-index: 0 !important;
}
.mavon-editor-change-cintainer .tools-item[data-v-6f2c9fd2] {
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  height: 28px;
  width: 28px;
  margin: 6px 0 5px 0px;
  font-size: 15px;
  padding: 4.5px 6px 5px 3.5px;
  color: #757575;
  border-radius: 5px;
  background: none;
  border: none;
  outline: none;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
}
.mavon-editor-change-cintainer .tools-item .upload[data-v-6f2c9fd2] {
  font-family: fontello;
  font-style: normal;
  font-weight: 400;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.2em;
  margin-top: 2px;
  -webkit-font-smoothing: antialiased;
}
.mavon-editor-change-cintainer .tools-item[data-v-6f2c9fd2]:hover {
  color: rgba(0, 0, 0, 0.8);
  background: #e5e5e5;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-043dc804]::after {
  content: '';
  display: block;
  clear: both;
}
#markdown-container[data-v-043dc804] .v-note-panel {
  border: none;
  position: relative;
  z-index: 1;
}
#markdown-container[data-v-043dc804] .v-show-content {
  background: transparent;
}
#markdown-container[data-v-043dc804] .v-show-content video {
  max-width: 100%;
}
.html-container[data-v-043dc804] {
  padding: 16px;
  /* table 样式 */
  /* blockquote 样式 */
  /* code 样式 */
  /* ul ol 样式 */
}
.html-container table[data-v-043dc804] {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.html-container table td[data-v-043dc804],
.html-container table th[data-v-043dc804] {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.html-container table th[data-v-043dc804] {
  border-bottom: 2px solid #ccc;
  text-align: center;
}
.html-container blockquote[data-v-043dc804] {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
.html-container code[data-v-043dc804] {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.html-container pre code[data-v-043dc804] {
  display: block;
}
.html-container ul[data-v-043dc804],
.html-container ol[data-v-043dc804] {
  margin: 10px 0 10px 20px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-4aaed15d]::after {
  content: '';
  display: block;
  clear: both;
}
.feedback-container[data-v-4aaed15d] {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.feedback-container .page-0[data-v-4aaed15d] {
  width: 100%;
  text-align: center;
}
.feedback-container .page-0 .nb-loading[data-v-4aaed15d] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.feedback-container .page-0 p[data-v-4aaed15d] {
  display: inline-block;
  vertical-align: middle;
}
.feedback-container .page-1[data-v-4aaed15d] {
  width: 100%;
}
.feedback-container .page-1 .note[data-v-4aaed15d] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 16px;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 200px - 16px);
}
.feedback-container .page-1 .button-group[data-v-4aaed15d] {
  width: 200px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.feedback-container .page-1 .button-group .thumbup[data-v-4aaed15d],
.feedback-container .page-1 .button-group .thumbdown[data-v-4aaed15d] {
  color: #FFFFFF;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 32px;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.feedback-container .page-1 .button-group .thumbup .iconfont[data-v-4aaed15d],
.feedback-container .page-1 .button-group .thumbdown .iconfont[data-v-4aaed15d],
.feedback-container .page-1 .button-group .thumbup p[data-v-4aaed15d],
.feedback-container .page-1 .button-group .thumbdown p[data-v-4aaed15d] {
  display: inline-block;
}
.feedback-container .page-1 .button-group .thumbup p[data-v-4aaed15d],
.feedback-container .page-1 .button-group .thumbdown p[data-v-4aaed15d] {
  margin-left: 8px;
  transform: scale(0.8);
}
.feedback-container .page-1 .button-group .thumbup[data-v-4aaed15d]:hover,
.feedback-container .page-1 .button-group .thumbdown[data-v-4aaed15d]:hover {
  transform: translate(0px, -2px);
}
.feedback-container .page-1 .button-group .thumbup[data-v-4aaed15d] {
  background: #FFC107;
  margin-right: 8px;
  box-shadow: rgba(255, 193, 7, 0.3) 0px 5px 15px;
}
.feedback-container .page-1 .button-group .thumbdown[data-v-4aaed15d] {
  background: #444444;
  box-shadow: rgba(68, 68, 68, 0.3) 0px 5px 15px;
}
.feedback-container .page-2[data-v-4aaed15d] {
  width: 100%;
}
.feedback-container .page-2 .result[data-v-4aaed15d] {
  width: calc("~100% - 100px");
}
.feedback-container .page-2 .thumbup[data-v-4aaed15d],
.feedback-container .page-2 .thumbdown[data-v-4aaed15d] {
  color: #FFFFFF;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 32px;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.feedback-container .page-2 .thumbup .iconfont[data-v-4aaed15d],
.feedback-container .page-2 .thumbdown .iconfont[data-v-4aaed15d],
.feedback-container .page-2 .thumbup p[data-v-4aaed15d],
.feedback-container .page-2 .thumbdown p[data-v-4aaed15d] {
  display: inline-block;
}
.feedback-container .page-2 .thumbup p[data-v-4aaed15d],
.feedback-container .page-2 .thumbdown p[data-v-4aaed15d] {
  transform: scale(0.8);
}
.feedback-container .page-2 .thumbup[data-v-4aaed15d] {
  background: #FFC107;
  box-shadow: rgba(255, 193, 7, 0.3) 0px 5px 15px;
}
.feedback-container .page-2 .thumbdown[data-v-4aaed15d] {
  background: #444444;
  box-shadow: rgba(68, 68, 68, 0.3) 0px 5px 15px;
}
.feedback-container .page-2 .comment[data-v-4aaed15d] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 16px;
  width: calc(100% - 180px);
  display: inline-block;
  margin-left: 16px;
  vertical-align: middle;
}
.feedback-container .page-2 .submit[data-v-4aaed15d] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 16px;
  color: #03A9F4;
}
.feedback-container .page-2 .nb-divider[data-v-4aaed15d] {
  margin: 16px 0px;
}
.feedback-container .page-2 .nb-input-container[data-v-4aaed15d] {
  width: calc(100% - 135px);
  display: inline-block;
  vertical-align: middle;
}
.feedback-container .page-2 .nb-button[data-v-4aaed15d] {
  width: 120px;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-843fef6a]::after {
  content: '';
  display: block;
  clear: both;
}
.content .transf[data-v-843fef6a] {
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.content .roate[data-v-843fef6a] {
  transform: rotateZ(90deg);
}
.content .content-title[data-v-843fef6a] {
  padding-top: 40px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  text-align: center;
}
.content .marg-left[data-v-843fef6a] {
  margin-left: 72px;
  width: 50% !important;
  box-sizing: border-box;
  height: 59px;
  padding: 10px 0;
}
.content .content-info[data-v-843fef6a] {
  text-align: center;
  margin-top: 16px;
}
.content .content-info .content-info-item[data-v-843fef6a] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  vertical-align: bottom;
}
.content .content-info .content-info-item .iconfont[data-v-843fef6a],
.content .content-info .content-info-item p[data-v-843fef6a] {
  display: inline-block;
  vertical-align: middle;
}
.content .content-info .content-info-item .iconfont[data-v-843fef6a] {
  font-size: 16px;
}
.content .content-info .nb-divider[data-v-843fef6a] {
  height: 8px;
  margin: 0px 16px;
  vertical-align: middle;
}
.content .content-header[data-v-843fef6a] {
  margin-bottom: 32px;
  text-align: center;
}
.content .content-header h2[data-v-843fef6a] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.content .content-header p[data-v-843fef6a] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.content .content-document .nb-divider[data-v-843fef6a] {
  margin: 0px 32px;
}
.content .list-document-item img[data-v-843fef6a] {
  width: 52px;
  height: 52px;
  display: inline-block;
  vertical-align: middle;
}
.content .list-document-item .icon-view[data-v-843fef6a] {
  position: absolute;
  float: left;
  width: 52px;
  height: 52px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  line-height: 52px;
  text-align: center;
  border: 1px solid #e8e8e8;
}
.content .list-document-item .icon-view span[data-v-843fef6a] {
  font-size: 32px;
  color: #03A9F4;
  clear: both !important;
  vertical-align: top !important;
  margin: 0 !important;
  float: initial !important;
}
.content .list-document-item .item[data-v-843fef6a] {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content .list-document-item .item .left[data-v-843fef6a] {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
}
.content .list-document-item .item .left .title[data-v-843fef6a] {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.content .list-document-item .item .left .title span[data-v-843fef6a] {
  display: inline-block;
  height: 20px;
  width: 56px;
  line-height: 20px;
  color: #FFFFFF;
  background-color: #03A9F4;
  font-family: PingFangSC-Semibold;
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 0;
  margin-left: 20px;
  border-radius: 2px;
  text-align: center;
}
.content .list-document-item .item .left .green[data-v-843fef6a] {
  color: #8BC34A;
}
.content .list-document-item .item .left .primary[data-v-843fef6a] {
  color: #03A9F4;
}
.content .list-document-item .item .left .warning[data-v-843fef6a] {
  color: #FFC107;
}
.content .list-document-item .item .left .danger[data-v-843fef6a] {
  color: #E91E63;
}
.content .list-document-item .item .left .back[data-v-843fef6a] {
  color: #444444;
}
.content .list-document-item .item .left .text-imp[data-v-843fef6a] {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
}
.content .list-document-item .item .left .content[data-v-843fef6a] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.content .list-document-item .item .right[data-v-843fef6a] {
  float: right;
  vertical-align: middle;
}
.content .list-document-item .item .right p[data-v-843fef6a] {
  line-height: 24px;
}
.content .list-document-item .item .right span[data-v-843fef6a] {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
}
.content .list-document-item .item .right .state-item[data-v-843fef6a] {
  width: 68px;
  height: 28px;
  border-radius: 10px 0 10px 0;
  line-height: 28px;
  text-align: center;
  color: #FFFFFF;
  margin-top: 10px;
  font-size: 12px;
}
.content .list-document-item .item .right .ysp[data-v-843fef6a] {
  background: #03A9F4;
}
.content .list-document-item .item .right .dtj[data-v-843fef6a] {
  background: #E91E63;
}
.content .list-document-item .item .right .dsp[data-v-843fef6a] {
  background: #444444;
}
.content .list-document-item .item .right .jbhg[data-v-843fef6a] {
  color: #8BC34A;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.content .list-document-item .item .right .bhg[data-v-843fef6a] {
  color: #E91E63;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.content .list-document-item .item .right .loadding[data-v-843fef6a] {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #9e9e9e;
  letter-spacing: 0;
}
.content .list-document-item .item .right .sl[data-v-843fef6a] {
  color: #9e9e9e;
  font-family: PingFangSC-Regular;
  font-size: 12px;
}
.content .list-document-item .item .right .yxzy[data-v-843fef6a] {
  color: #FFC107;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.content .list-document-item .item .right .look-detail[data-v-843fef6a] {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #03a9f4;
  letter-spacing: 0;
  line-height: 14px;
}
.content .list-document-item .item .right .icon-1[data-v-843fef6a] {
  color: #FFFFFF;
  font-size: 14px;
  margin-left: 8px;
  margin-top: 0;
  background: #8BC34A;
}
.content .list-document-item .item .right .icon-2[data-v-843fef6a] {
  color: #FFFFFF;
  font-size: 14px;
  margin-left: 8px;
  margin-top: 0;
  background: #E91E63;
}
.content .list-document-item .item .right .icon-3[data-v-843fef6a] {
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  color: #03A9F4;
  margin-top: 0;
  margin-left: 8px;
  -webkit-animation: roate-data-v-843fef6a 1s linear infinite;
  -moz-animation: roate-data-v-843fef6a 1s linear infinite;
  -ms-animation: roate-data-v-843fef6a 1s linear infinite;
  -o-animation: roate-data-v-843fef6a 1s linear infinite;
}
.content .list-document-item .item .right .icon-4[data-v-843fef6a] {
  color: #FFFFFF;
  font-size: 14px;
  margin-left: 8px;
  margin-top: 0;
  background: #FFC107;
}
@keyframes roate-data-v-843fef6a {
0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}
.content .content-document-item[data-v-843fef6a] {
  overflow: hidden;
  padding: 16px 32px;
  position: relative;
  cursor: pointer;
}
.content .content-document-item img[data-v-843fef6a] {
  position: absolute;
  float: left;
  height: 40px;
}
.content .content-document-item .content-document-item-info[data-v-843fef6a] {
  display: inline-block;
  margin-top: 4px;
  margin-left: 72px;
}
.content .content-document-item .content-document-item-info h2[data-v-843fef6a] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.content .content-document-item .content-document-item-info p[data-v-843fef6a] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.content .content-document-item .noworknum[data-v-843fef6a] {
  float: right;
  vertical-align: middle;
  padding: 4px 8px;
  background: #E91E63;
  color: #FFFFFF;
  border-radius: 10px;
  display: inline-block;
  margin-top: 8px;
  margin-right: 12px;
}
.content .content-document-item .iconfont[data-v-843fef6a] {
  float: right;
  vertical-align: middle;
  margin-top: 12px;
}
.content .content-document-item[data-v-843fef6a]:hover {
  background: #F8F8F8;
}
.content .content-milestone[data-v-843fef6a] {
  overflow: hidden;
  margin: 0px 16px;
  color: #FFFFFF;
  border-radius: 5px;
  background: #4C4C4C no-repeat;
  background-size: cover;
  animation: flowbackground-data-v-843fef6a 10s alternate infinite;
}
.content .content-milestone .mask[data-v-843fef6a] {
  width: calc(100% - 48px);
  height: 100%;
  padding: 24px;
  overflow: hidden;
  background: rgba(68, 68, 68, 0.5);
}
.content .content-milestone .block[data-v-843fef6a] {
  display: inline-block;
  vertical-align: middle;
}
.content .content-milestone .content-milestone-info[data-v-843fef6a] {
  line-height: 22px;
}
.content .content-milestone .content-milestone-avatars[data-v-843fef6a] {
  margin-top: 16px;
}
.content .content-milestone .content-milestone-avatars .avatar[data-v-843fef6a] {
  display: inline-block;
  margin-right: 8px;
}
.content .content-milestone .content-milestone-challenge[data-v-843fef6a] {
  width: 180px;
  float: right;
  margin-top: 28px;
}
.content .content-milestone .result[data-v-843fef6a] {
  margin-bottom: 16px;
}
.content .content-milestone .result .note[data-v-843fef6a] {
  color: #FFFFFF;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.content .content-milestone .result .note .note-details[data-v-843fef6a] {
  color: #03A9F4;
}
.content .content-milestone .result .note .note-failed[data-v-843fef6a] {
  color: #E91E63;
}
.content .content-milestone .result .note .note-success[data-v-843fef6a] {
  color: #8BC34A;
}
.content .content-milestone .result .note .note-excellent[data-v-843fef6a] {
  color: #FFC107;
}
.content .content-milestone .result .icon[data-v-843fef6a] {
  display: inline-block;
  vertical-align: middle;
}
.content .content-milestone .result .icon .iconfont[data-v-843fef6a] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  font-size: 16px;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 24px;
  text-align: center;
}
.content .content-milestone .result .icon .icon-waiting[data-v-843fef6a] {
  background: #F8F8F8;
  border: 1px solid #E8E8E8;
  color: #03A9F4;
  animation: rotate-data-v-843fef6a 1s linear infinite;
}
.content .content-milestone .result .icon .icon-doing[data-v-843fef6a] {
  background: #F8F8F8;
  border: 1px solid #E8E8E8;
  color: #03A9F4;
  animation: rotate-data-v-843fef6a 2s infinite cubic-bezier(1, 0, 0.6, 1);
}
.content .content-milestone .result .icon .icon-failed[data-v-843fef6a] {
  background: #E91E63;
  color: #FFFFFF;
}
.content .content-milestone .result .icon .icon-success[data-v-843fef6a] {
  background: #8BC34A;
  color: #FFFFFF;
}
.content .content-milestone .result .icon .icon-excellent[data-v-843fef6a] {
  background: #FFC107;
  color: #FFFFFF;
}
.content .content-next[data-v-843fef6a] {
  text-align: center;
}
.content .content-next .nb-button[data-v-843fef6a] {
  width: 38.2%;
  margin-bottom: 32px;
}
.content .feedback[data-v-843fef6a] {
  padding: 32px;
  box-sizing: border-box;
}
@keyframes flowbackground-data-v-843fef6a {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
@-webkit-keyframes flowbackground-data-v-843fef6a {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
@keyframes rotate-data-v-843fef6a {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@-webkit-keyframes rotate-data-v-843fef6a {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.nodata[data-v-843fef6a] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  text-align: center;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-e47cdac6]::after {
  content: '';
  display: block;
  clear: both;
}
.main-container[data-v-e47cdac6] {
  padding-top: 32px;
  overflow: hidden;
}
.main-container .left[data-v-e47cdac6] {
  width: 416px;
  float: left;
}
.main-container .left .course-info[data-v-e47cdac6] {
  text-align: center;
  margin-top: 80px;
  padding-bottom: 24px;
}
.main-container .left .course-info .cover[data-v-e47cdac6] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  display: inline-block;
  margin-top: -48px;
  width: 188px;
  height: 150px;
  background-image: url(/./assets/assets_example_image.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.main-container .left .course-info h1[data-v-e47cdac6] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-top: 16px;
}
.main-container .left .course-info .describe[data-v-e47cdac6] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 16px;
  text-align: justify;
  margin: 0px 24px;
  margin-top: 8px;
}
.main-container .left .course-info .nb-divider[data-v-e47cdac6] {
  width: 96px;
  margin: 24px auto;
}
.main-container .left .course-info .note[data-v-e47cdac6] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.main-container .left .course-info .teacher-info[data-v-e47cdac6] {
  margin: 16px;
  display: inline-block;
}
.main-container .left .course-info .teacher-info .name[data-v-e47cdac6] {
  max-width: 64px;
  margin-top: 16px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main-container .left .syllabus[data-v-e47cdac6] {
  width: 100%;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.main-container .left .syllabus img[data-v-e47cdac6] {
  margin-left: 24px;
  display: inline-block;
  vertical-align: middle;
}
.main-container .left .syllabus h1[data-v-e47cdac6] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-left: 24px;
}
.main-container .left .syllabus .iconfont[data-v-e47cdac6] {
  float: right;
  margin-right: 16px;
  margin-top: 2px;
  color: #9E9E9E;
}
.main-container .display[data-v-e47cdac6] {
  display: none;
}
.main-container .right[data-v-e47cdac6] {
  width: calc(100% - 416px);
  float: right;
}
.main-container .margin-block[data-v-e47cdac6] {
  margin: 0px 48px;
}
.main-container .block[data-v-e47cdac6] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  overflow: unset;
  width: 100%;
  margin-bottom: 16px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-31b19e22]::after {
  content: '';
  display: block;
  clear: both;
}
.course-block-container[data-v-31b19e22] {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0 24px;
  min-width: 960px;
  font-size: 0;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.course-block-container .cover[data-v-31b19e22] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  overflow: initial;
  display: inline-block;
  width: 190px;
  height: 150px;
  margin: 24px 0;
  margin-right: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  border: 4px solid #FFFFFF;
  box-sizing: border-box;
  vertical-align: top;
}
.course-block-container .cover .cover-tips[data-v-31b19e22] {
  z-index: calc(10000 - 2000) !important;
}
.course-block-container .cover .is_hidden[data-v-31b19e22] {
  top: 0;
  left: 0;
}
.course-block-container .cover .is_hidden img[data-v-31b19e22] {
  width: 62px;
  height: 62px;
}
.course-block-container .info[data-v-31b19e22] {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 24px 0;
  max-width: calc(100% - 522px);
}
.course-block-container .info .title[data-v-31b19e22] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  padding-top: 8px;
}
.course-block-container .info .tag[data-v-31b19e22] {
  margin-left: 8px;
  height: 24px;
}
.course-block-container .info .title-center .teacher[data-v-31b19e22] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.course-block-container .info .title-center .describe[data-v-31b19e22] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #9E9E9E;
  text-align: justify;
  margin-top: 16px;
  padding-right: 16px;
  line-height: 24px;
  height: 48px;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 48px;
}
.course-block-container .info .title-center .details[data-v-31b19e22] {
  margin-top: 16px;
  display: flex;
  align-items: center;
}
.course-block-container .info .title-center .details li[data-v-31b19e22] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  float: left;
  margin-right: 16px;
}
.course-block-container .info .title-center .details li .iconfont[data-v-31b19e22] {
  display: inline-block;
  margin-right: 8px;
}
.course-block-container .info .title-center .details li .text[data-v-31b19e22] {
  display: inline-block;
}
.course-block-container .info .title-center .details li .divider[data-v-31b19e22] {
  display: inline-block;
  height: 8px;
  border-right: 1px solid #E8E8E8;
  margin-left: 16px;
}
.course-block-container .course-signup[data-v-31b19e22] {
  width: 300px;
  height: 198px;
  background: #FFFFFF;
  float: right;
  display: inline-block;
  vertical-align: top;
  padding: 32px;
  box-sizing: border-box;
  position: relative;
}
.course-block-container .course-signup .signup-info[data-v-31b19e22] {
  font-size: 0;
}
.course-block-container .course-signup .signup-info .info-inlineblock[data-v-31b19e22] {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}
.course-block-container .course-signup .signup-info .info-inlineblock .info-title[data-v-31b19e22] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-top: 8px;
  color: #444444;
}
.course-block-container .course-signup .signup-info .info-inlineblock .info-text[data-v-31b19e22] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.course-block-container .course-signup .signup-btn[data-v-31b19e22] {
  position: absolute;
  bottom: 32px;
  width: 100%;
}
.course-block-container .course-signup .signup-btn .btn[data-v-31b19e22] {
  width: calc( 100% - 32px - 32px);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-6bd1a2ac]::after {
  content: '';
  display: block;
  clear: both;
}
.coursesucc[data-v-6bd1a2ac] {
  width: 400px;
  height: 362px;
}
.coursesucc .coursesucc-top[data-v-6bd1a2ac] {
  width: 100%;
  height: 192px;
  position: relative;
}
.coursesucc .coursesucc-top .courseInfo[data-v-6bd1a2ac] {
  position: absolute;
  top: -24px;
  text-align: center;
  width: 100%;
}
.coursesucc .coursesucc-top .courseInfo .courseInfo-Cover[data-v-6bd1a2ac] {
  width: 190px;
  height: 150px;
  background-size: cover;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.coursesucc .coursesucc-top .courseInfo .coursename[data-v-6bd1a2ac] {
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.coursesucc .coursesucc-center[data-v-6bd1a2ac] {
  width: 100%;
  background: #F8F8F8;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
.coursesucc .coursesucc-center .suuctips[data-v-6bd1a2ac] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  padding-bottom: 8px;
}
.coursesucc .coursesucc-center .suuctips2[data-v-6bd1a2ac] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.coursesucc .coursesucc-bottom[data-v-6bd1a2ac] {
  text-align: center;
  padding: 24px;
}
.coursesucc .coursesucc-bottom .nb-button[data-v-6bd1a2ac] {
  width: 150px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-2e8b60e2]::after {
  content: '';
  display: block;
  clear: both;
}
.course-entry-container[data-v-2e8b60e2] {
  width: 100%;
  min-height: calc( 100vh - 80px - 140px);
}
.course-entry-container .course-info[data-v-2e8b60e2] {
  margin-top: 32px;
  box-sizing: border-box;
  padding: 0 32px;
}
.course-entry-container .course-head[data-v-2e8b60e2] {
  height: 64px;
  min-width: 1024px;
  position: relative;
  font-size: 0;
  background: #F8F8F8;
  box-sizing: border-box;
}
.course-entry-container .course-head .course-head-left[data-v-2e8b60e2] {
  height: 100%;
  padding: 16px 32px;
  box-sizing: border-box;
  display: inline-block;
}
.course-entry-container .course-head .course-head-left .back[data-v-2e8b60e2] {
  width: 32px;
  height: 32px;
  background: #444444;
  display: inline-block;
  vertical-align: middle;
  border-radius: 100%;
  text-align: center;
  cursor: pointer;
}
.course-entry-container .course-head .course-head-left .back i[data-v-2e8b60e2] {
  font-size: 16px;
  line-height: 32px;
  color: #FFFFFF;
}
.course-entry-container .course-head .course-head-left .course-name[data-v-2e8b60e2] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 16px;
}
.course-entry-container .course-head .course-head-left .course-name p[data-v-2e8b60e2]:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}
.course-entry-container .course-head .course-head-left .course-name p[data-v-2e8b60e2]:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.course-entry-container .course-head .course-head-right[data-v-2e8b60e2] {
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  float: right;
}
.course-entry-container .course-head .course-head-right .back[data-v-2e8b60e2],
.course-entry-container .course-head .course-head-right .backserve[data-v-2e8b60e2] {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}
.course-entry-container .course-head .course-head-right .back i[data-v-2e8b60e2],
.course-entry-container .course-head .course-head-right .backserve i[data-v-2e8b60e2] {
  font-size: 16px;
}
.course-entry-container .course-head .course-head-right .back span[data-v-2e8b60e2],
.course-entry-container .course-head .course-head-right .backserve span[data-v-2e8b60e2] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-left: 8px;
}
.course-entry-container .course-head .course-head-right .divider-vertical[data-v-2e8b60e2] {
  margin: 0 16px;
  height: 100%;
}
.course-entry-container .entry-top[data-v-2e8b60e2] {
  width: 100%;
  margin: 0 auto;
  max-width: 1376px;
  box-sizing: border-box;
  background: #4C4C4C no-repeat;
  background-size: cover;
  animation: flowbackground-data-v-2e8b60e2 10s alternate infinite;
  border-radius: 10px;
}
.course-entry-container .entry-top .mask[data-v-2e8b60e2] {
  height: 100%;
  background: rgba(68, 68, 68, 0.7);
  color: #FFFFFF;
  border-radius: 10px;
}
.course-entry-container .entry-top .course[data-v-2e8b60e2] {
  box-sizing: border-box;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 16px 32px;
}
.course-entry-container .entry-top .entry-top-btns[data-v-2e8b60e2] {
  text-align: center;
  padding-top: 32px;
}
.course-entry-container .entry-top .entry-top-btns .nb-button[data-v-2e8b60e2] {
  width: 165px;
}
@keyframes flowbackground-data-v-2e8b60e2 {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
@-webkit-keyframes flowbackground-data-v-2e8b60e2 {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-1fc070af]::after {
  content: '';
  display: block;
  clear: both;
}
.infoblock-container[data-v-1fc070af] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.infoblock-container .info[data-v-1fc070af] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
}
.infoblock-container .info .iconfont[data-v-1fc070af] {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.infoblock-container .info .value[data-v-1fc070af] {
  display: inline-block;
  vertical-align: middle;
}
.infoblock-container .nb-divider[data-v-1fc070af] {
  display: inline-block;
  vertical-align: middle;
  height: 8px;
  margin-left: 16px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-689ece2a]::after {
  content: '';
  display: block;
  clear: both;
}
.section-state .section-state-root[data-v-689ece2a] {
  width: 96px;
  height: 32px;
  border-radius: 25px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #FFFFFF;
  text-align: center;
  line-height: 32px;
}
.section-state .end[data-v-689ece2a] {
  background: #8BC34A !important;
}
.section-state .ing[data-v-689ece2a] {
  background: #03A9F4 !important;
}
.section-state .lock[data-v-689ece2a] {
  background: #E8E8E8;
}
.section-state i[data-v-689ece2a] {
  color: #9E9E9E;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-6d18e484]::after {
  content: '';
  display: block;
  clear: both;
}
.section-bock[data-v-6d18e484] {
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  cursor: pointer;
}
.section-bock .section-bock-top[data-v-6d18e484] {
  display: flex;
  justify-content: space-between;
}
.section-bock .section-bock-top .section-bock-left .leftStateTitle[data-v-6d18e484] {
  height: 32px;
  display: flex;
  align-items: center;
}
.section-bock .section-bock-top .section-bock-left .leftStateTitle .leftStateTitleText[data-v-6d18e484] {
  font-size: 24px;
  line-height: 24px;
  font-weight: normal;
  color: #444444;
  padding-left: 24px;
}
.section-bock .section-bock-top .section-bock-left .leftContent[data-v-6d18e484] {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 16px;
}
.section-bock .section-bock-top .section-bock-left .leftContent p[data-v-6d18e484] {
  font-size: 14px;
  line-height: 22px;
  color: #444444;
}
.section-bock .section-bock-top .section-bock-right[data-v-6d18e484] {
  flex-shrink: 0;
  width: 150px;
  height: 106px;
  background-size: cover;
  border-radius: 10px;
}
.section-bock .section-bock-bottom[data-v-6d18e484] {
  padding-bottom: 24px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-a2f7832c]::after {
  content: '';
  display: block;
  clear: both;
}
.sectionLevel[data-v-a2f7832c] {
  width: 100%;
  margin-bottom: 32px;
}
.sectionLevel .sectionLevel-title[data-v-a2f7832c] {
  width: 100%;
  display: flex;
  height: 56px;
}
.sectionLevel .sectionLevel-title .left[data-v-a2f7832c] {
  font-size: 56px;
  line-height: 56px;
}
.sectionLevel .sectionLevel-title .right[data-v-a2f7832c] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 16px;
}
.sectionLevel .sectionLevel-title .right .sectionLeveltitle[data-v-a2f7832c] {
  padding-bottom: 8px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  color: #444444;
}
.sectionLevel .sectionLevel-title .right .sectionLevelno[data-v-a2f7832c] {
  font-size: 12px;
  color: #9E9E9E;
}
.sectionLevel .axb[data-v-a2f7832c] {
  background: #F8F8F8;
  border-radius: 10px;
  padding: 24px;
  box-sizing: border-box;
}
.sectionLevel .axb .Target[data-v-a2f7832c] {
  width: 100%;
}
.sectionLevel .axb .Target .div-title[data-v-a2f7832c] {
  margin-bottom: 16px;
  border-left: 4px solid #03A9F4;
  padding-left: 8px;
  box-sizing: border-box;
}
.sectionLevel .axb .Target .div-title span[data-v-a2f7832c]:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}
.sectionLevel .axb .Target .div-title span[data-v-a2f7832c]:nth-child(2) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  float: right;
  display: inline-block;
  vertical-align: middle;
}
.sectionLevel .axb .Target p[data-v-a2f7832c] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.sectionLevel .axb .divider[data-v-a2f7832c] {
  width: 100%;
  margin: 24px 0;
}
.sectionLevel .axb .Project .div-title[data-v-a2f7832c] {
  margin-bottom: 16px;
  border-left: 4px solid #03A9F4;
  padding-left: 8px;
  box-sizing: border-box;
}
.sectionLevel .axb .Project .div-title span[data-v-a2f7832c]:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}
.sectionLevel .axb .Project .div-title span[data-v-a2f7832c]:nth-child(2) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  float: right;
  display: inline-block;
  vertical-align: middle;
}
.sectionLevel .axb .Project .Project-main p[data-v-a2f7832c]:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}
.sectionLevel .axb .Project .Project-main p[data-v-a2f7832c]:nth-child(2) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.sectionLevel .sectionLevel-qute[data-v-a2f7832c] {
  margin-top: 48px;
  width: 100%;
  min-height: 120px;
  background: #F8F8F8;
  display: flex;
  padding-right: 16px;
  box-sizing: border-box;
  border-radius: 10px;
}
.sectionLevel .sectionLevel-qute .qute-content[data-v-a2f7832c] {
  display: flex;
  padding: 24px;
  width: calc(100% - 165px);
  height: 100%;
  box-sizing: border-box;
}
.sectionLevel .sectionLevel-qute .qute-content img[data-v-a2f7832c] {
  height: 32px;
}
.sectionLevel .sectionLevel-qute .qute-content .endimg[data-v-a2f7832c] {
  transform: rotateY(180deg);
  position: relative;
  bottom: 0;
}
.sectionLevel .sectionLevel-qute .qute-content .content-center[data-v-a2f7832c] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 24px;
  width: calc(100% - 124px);
}
.sectionLevel .sectionLevel-qute .qute-content .content-center .content-center-author[data-v-a2f7832c] {
  text-align: right;
}
.sectionLevel .sectionLevel-qute .qute-content .content-right[data-v-a2f7832c] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sectionLevel .sectionLevel-qute .qute-img[data-v-a2f7832c] {
  width: 165px;
  position: relative;
}
.sectionLevel .sectionLevel-qute .qute-img img[data-v-a2f7832c] {
  width: 100%;
  object-fit: cover;
  position: absolute;
  bottom: 0;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.sectionLevel-container {
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px;
}
.sectionLevel-container .sectionLevel-root {
  width: auto;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  font-size: 0;
  *font-size: 0;
  *letter-spacing: normal;
  *word-spacing: -1px;
}
.sectionLevel-container .sectionLevel-list {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  max-width: 1376px;
  *display: inline;
  *zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
}
.sectionLevel-container .addTeam {
  display: inline-block;
  position: relative;
  margin-left: 48px;
  vertical-align: top;
  *display: inline;
  *zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
}
.sectionLevel-container .addTeam .block {
  position: absolute;
  left: 0;
  top: 0;
}
.sectionLevel-container .addTeam .block h1 {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.sectionLevel-container .addTeam .block p {
  margin-top: 8px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.sectionLevel-container .addTeam .block .sprite {
  margin-top: 80px;
  transform: scale(0.85);
}
.sectionLevel-container .addTeam .block .blockleft {
  text-align: left;
}
.sectionLevel-container .addTeam .block .center {
  text-align: center;
  margin-top: 24px;
}
.sectionLevel-container .addTeam .block .center .nb-button {
  margin-top: 24px;
}
.sectionLevel-container .addTeam .block .center .nb-divider {
  margin-top: 24px;
}
.sectionLevel-container .sectionLevel-listWh {
  width: calc(100% - 368px);
}
.sectionLevel-container .addTeamWH {
  width: 320px;
  height: 481px;
}
@media screen and (max-width: 1024px) {
.sectionLevel-container .addTeamWH {
    width: 240px;
    height: 481px;
    margin-left: 24px;
}
.sectionLevel-container .sectionLevel-listWh {
    width: calc(100% - 288px);
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.service-block-item {
  height: 180px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;
}
.service-block-item .block-item-left {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 260px);
  padding-left: 32px;
  box-sizing: border-box;
}
.service-block-item .block-item-left .service-title {
  margin-top: 8px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 45px;
  margin-bottom: 4px;
}
.service-block-item .block-item-left .service-label {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-break: 14px;
}
.service-block-item .block-item-right {
  display: inline-block;
  vertical-align: middle;
  width: 260px;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.service-block-item .block-item-right .service-thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.service-block-item {
  height: 180px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;
}
.service-block-item .block-item-left {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 260px);
  padding-left: 32px;
  box-sizing: border-box;
}
.service-block-item .block-item-left .service-title {
  margin-top: 8px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 45px;
  margin-bottom: 4px;
}
.service-block-item .block-item-left .service-label {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-break: 14px;
}
.service-block-item .block-item-right {
  display: inline-block;
  vertical-align: middle;
  width: 260px;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.service-block-item .block-item-right .service-thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.service-block-item {
  height: 180px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;
}
.service-block-item .block-item-left {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 260px);
  padding-left: 32px;
  box-sizing: border-box;
}
.service-block-item .block-item-left .service-title {
  margin-top: 8px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 45px;
  margin-bottom: 4px;
}
.service-block-item .block-item-left .service-label {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-break: 14px;
}
.service-block-item .block-item-right {
  display: inline-block;
  vertical-align: middle;
  width: 260px;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.service-block-item .block-item-right .service-thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.service-block-item {
  height: 180px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;
}
.service-block-item .block-item-left {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 260px);
  padding-left: 32px;
  box-sizing: border-box;
}
.service-block-item .block-item-left .service-title {
  margin-top: 8px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 45px;
  margin-bottom: 4px;
}
.service-block-item .block-item-left .service-label {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-break: 14px;
}
.service-block-item .block-item-right {
  display: inline-block;
  vertical-align: middle;
  width: 260px;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.service-block-item .block-item-right .service-thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.service-block-item {
  height: 180px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0;
}
.service-block-item .block-item-left {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 260px);
  padding-left: 32px;
  box-sizing: border-box;
}
.service-block-item .block-item-left .service-title {
  margin-top: 8px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 45px;
  margin-bottom: 4px;
}
.service-block-item .block-item-left .service-label {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-break: 14px;
}
.service-block-item .block-item-right {
  display: inline-block;
  vertical-align: middle;
  width: 260px;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.service-block-item .block-item-right .service-thumbnail {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.course-service-list {
  width: 984px;
  margin: 0 auto;
}
.course-service-list .service-block {
  float: left;
  width: 480px;
  margin-right: 24px;
  margin-bottom: 24px;
  cursor: pointer;
}
.course-service-list .service-block:nth-child(2n) {
  margin-right: 0;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-2acbde99]::after {
  content: '';
  display: block;
  clear: both;
}
.course-tab[data-v-2acbde99] {
  padding: 24px;
  position: relative;
}
.course-tab .course-tab-title[data-v-2acbde99] {
  height: 48px;
  border-radius: 5px;
  font-size: 0;
  position: relative;
}
.course-tab .course-tab-title .tab-title-text[data-v-2acbde99] {
  text-align: center;
}
.course-tab .course-tab-title .tab-title-text .textblock[data-v-2acbde99] {
  display: inline-block;
  vertical-align: middle;
  margin-top: 16px;
  cursor: pointer;
  height: 16px;
}
.course-tab .course-tab-title .tab-title-text .active[data-v-2acbde99] {
  color: #03A9F4;
}
.course-tab .course-tab-title .tab-title-text .tab-divider[data-v-2acbde99] {
  margin: 0 16px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
  line-height: 16px;
}
.course-tab .course-tab-title .tab-title-text i[data-v-2acbde99] {
  font-size: 16px;
  line-height: 16px;
}
.course-tab .course-tab-title .tab-title-text .spanblock[data-v-2acbde99] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  margin-left: 8px;
  line-height: 16px;
}
.course-tab .course-tab-title .tab-title-text .nb-badge[data-v-2acbde99] {
  top: -8px;
}
.course-tab .tab-title-speed[data-v-2acbde99] {
  position: absolute;
  bottom: 0;
  text-align: center;
  background: #03A9F4;
  display: inline-block;
  width: 96px;
  height: 2px;
  font-size: 0;
  transition: all 0.3s ease;
  left: calc(50% - 96px - 8px);
}
.course-tab .speedactive[data-v-2acbde99] {
  left: 425px;
  left: calc(50%  + 8px);
}
.tips-div[data-v-2acbde99] {
  width: 100%;
  position: relative;
}
.tips-div .tips-main[data-v-2acbde99] {
  text-align: center;
}
.tips-div .tips-main .main[data-v-2acbde99] {
  cursor: pointer;
  padding: 32px;
  box-sizing: border-box;
  background: #FFFFFF;
  margin: 0 auto;
  font-size: 0;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  text-align: center;
  display: inline-block;
}
.tips-div .tips-main .main .tips-main-inlineblock[data-v-2acbde99] {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.tips-div .tips-main .main p[data-v-2acbde99] {
  line-height: 30px !important;
  margin-right: 32px;
}
.tips-div .tips-main .main .btn[data-v-2acbde99] {
  width: 112px;
  height: 30px;
  border-radius: 24px;
  background: #03A9F4;
  color: #FFFFFF;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.tips-div .abs-div[data-v-2acbde99] {
  position: absolute;
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  left: calc( 50%  + 50px);
  top: -16px;
  transform: rotateZ(45deg);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.hislog-container {
  width: 984px;
  padding: 24px;
}
.hislog-container .hislog-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.hislog-container .hislog-list {
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  width: 100%;
  margin-top: 24px;
}
.hislog-container .hislog-list .hislog-list-title {
  background: #F8F8F8;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  height: 52px;
  line-height: 52px;
}
.hislog-container .hislog-list .hislog-list-title td {
  text-align: center;
}
.hislog-container .hislog-list .hislog-item {
  height: 52px;
  border-bottom: 1px solid #E8E8E8;
}
.hislog-container .hislog-list .hislog-item td {
  text-align: center;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 52px;
}
.hislog-container .hislog-list .hislog-item td:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.hislog-container .hislog-list .noborder {
  border-bottom: none;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.tool-integral-container {
  width: 960px;
  margin: 0 auto;
  padding-top: 96px;
}
.tool-integral-container .integral-me {
  height: 120px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  padding: 32px;
  box-sizing: border-box;
  background: #03A9F4;
}
.tool-integral-container .integral-me p:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.tool-integral-container .integral-me p:nth-child(2) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #FFFFFF;
}
.tool-integral-container .integral-his {
  padding: 16px 0;
}
.tool-integral-container .integral-his p {
  text-align: right;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #03A9F4;
  text-decoration: underline;
  cursor: pointer;
}
.tool-integral-container .integral-me-order {
  padding-top: 32px;
  padding-bottom: 32px;
}
.tool-integral-container .integral-me-order .max-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.tool-integral-container .integral-me-order .order-list {
  font-size: 0;
  margin-top: 32px;
}
.tool-integral-container .integral-me-order .order-list .item-order {
  display: inline-block;
  width: 472px;
  margin-right: 16px;
  margin-bottom: 16px;
  height: 120px;
  font-size: 0;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.tool-integral-container .integral-me-order .order-list .item-order .inblock {
  display: inline-block;
}
.tool-integral-container .integral-me-order .order-list .item-order .cover {
  width: 104px;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: #353535;
  vertical-align: middle;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r {
  width: calc( 100% - 104px);
  height: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: 0;
  vertical-align: middle;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-left {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  padding-top: 16px;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-left p:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #03A9F4;
  margin-bottom: 8px;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-left p:nth-child(2) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-left p:nth-child(3) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  max-height: 32px;
  height: 32px;
  line-height: 18px;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-right {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  text-align: right;
  padding-top: 36px;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-right .status {
  width: 96px;
  height: 40px;
  display: inline-block;
  border-radius: 25px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  text-align: center;
  line-height: 40px;
  background: #03A9F4;
  color: #FFFFFF;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-right .status-1 {
  background: #E91E63;
  color: #FFFFFF;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-right .status0 {
  background: #E8E8E8;
  color: #9E9E9E;
}
.tool-integral-container .integral-me-order .order-list .item-order .item-order-r .r-right .status3 {
  background: #8BC34A;
  color: #FFFFFF;
}
.tool-integral-container .integral-me-order .order-list .item-order:nth-child(2n) {
  margin-right: 0;
}
.tool-integral-container .integral-me-commodity {
  padding-bottom: 32px;
}
.tool-integral-container .integral-me-commodity .max-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.tool-integral-container .integral-me-commodity .commodity-list {
  margin-top: 32px;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-item {
  display: inline-block;
  width: 228px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  overflow: inherit;
  margin-right: 16px;
  margin-bottom: 16px;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-item:nth-child(4n) {
  margin-right: 0;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-cover {
  height: 120px;
  border-radius: 5px 5px 0 0;
  background-size: cover;
  background-position: center;
  position: relative;
  background-position: 0% 0%;
  transition: all 0.8s ease;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-cover .purchase {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #E91E63;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  padding: 8px;
  color: #FFFFFF;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-cover:hover {
  animation: flowbackground 10s alternate infinite;
}
.tool-integral-container .integral-me-commodity .commodity-list .coverdefault {
  background-size: cover;
  background-position: center;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-info {
  padding: 16px;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-info p:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #03A9F4;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-info p:nth-child(2) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-bottom: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-info p:nth-child(3) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  height: 36px;
  margin-bottom: 24px;
  overflow: hidden;
  max-height: 32px;
}
.tool-integral-container .integral-me-commodity .commodity-list .commodity-info .btn {
  width: 100%;
}
@keyframes flowbackground {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
@-webkit-keyframes flowbackground {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.class-block {
  display: inline-block;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.class-block .class-user-img {
  height: 124px;
  overflow: hidden;
  position: relative;
}
.class-block .class-user-img .uimglist {
  width: 304px;
  padding-top: 24px;
  position: absolute;
  top: 0;
  left: calc(50% - 152px);
}
.class-block .class-user-img .uimglist .uimg {
  display: inline-block;
  margin-right: 16px;
  margin-bottom: 16px;
}
.class-block .class-user-img .uimglist .uimg:nth-child(5) {
  margin-right: 0;
}
.class-block .class-user-img .uimglist .uimg:nth-child(6) {
  margin-left: 32px;
}
.class-block .class-user-img .uimglist .uimg:nth-child(9) {
  margin-right: 32px;
}
.class-block .class-user-img .uimglist .uimg:nth-child(14) {
  margin-right: 0;
}
.class-block .class-user-img .abs-div {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  text-align: right;
  padding: 16px;
  box-sizing: border-box;
}
.class-block .class-user-img .abs-div i {
  font-size: 16px;
  color: #03A9F4;
}
.class-block .class-name {
  padding: 16px 24px;
  box-sizing: border-box;
}
.class-block .class-name p:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.class-block .class-name p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.class-block .class-join {
  padding: 16px 24px;
  box-sizing: border-box;
  text-align: center;
}
.class-block .class-join p:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-bottom: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.class-block .class-join .nb-button {
  width: 100%;
}
.class-block:hover {
  transform: translateY(-10px);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.tool-class-list .tool-class-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.tool-class-list .list {
  margin-top: 32px;
  font-size: 0;
}
.tool-class-list .list .class-block-item {
  width: 228px;
  margin-right: 16px;
}
.tool-class-list .list .class-block-item:nth-child(4n) {
  margin-right: 0;
}
.tool-class-list .nodata {
  text-align: center;
  height: 80px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 80px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.class-me .class-me-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.class-me .class-me-info {
  width: 100%;
  height: 88px;
  padding: 0 32px;
  margin-top: 32px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.class-me .class-me-info .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #444444;
  opacity: 0.3;
}
.class-me .class-me-info p,
.class-me .class-me-info .nb-button {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.class-me .class-me-info .class-name {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  line-height: 88px;
  color: #FFFFFF;
}
.class-me .class-me-info .nb-button {
  float: right;
  margin-top: 25px;
  width: 120px;
}
.class-me .class-me-stus {
  margin-top: 32px;
}
.class-me .class-me-stus .class-me-stus-title {
  padding-left: 32px;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.class-me .class-me-stus .class-me-stus-list {
  font-size: 0;
  padding-top: 16px;
}
.class-me .class-me-stus .class-me-stus-list .stus-block {
  width: 240px;
  height: 80px;
  float: left;
  padding: 16px 32px;
  box-sizing: border-box;
}
.class-me .class-me-stus .class-me-stus-list .stus-block .avatar {
  display: inline-block;
  vertical-align: middle;
}
.class-me .class-me-stus .class-me-stus-list .stus-block .stu-info {
  vertical-align: middle;
  display: inline-block;
  padding-left: 16px;
  width: calc( 100% - 48px);
  box-sizing: border-box;
}
.class-me .class-me-stus .class-me-stus-list .stus-block .stu-info p:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.class-me .class-me-stus .class-me-stus-list .stus-block .stu-info p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.class-edit-con {
  width: 480px;
  padding: 32px;
  box-sizing: border-box;
}
.class-edit-con .class-edit-con-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.class-edit-con .joinclass {
  border-left: 2px solid #03A9F4;
  padding: 16px 0 16px 16px;
  box-sizing: border-box;
  margin: 32px 0;
}
.class-edit-con .joinclass p:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  color: #03A9F4;
  margin-bottom: 8px;
}
.class-edit-con .joinclass p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 16px;
}
.class-edit-con .btns-con {
  text-align: center;
}
.class-edit-con .btns-con .button_yes {
  width: 200px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.tool-class-container {
  width: 960px;
  margin: 0 auto;
  padding-top: 96px;
}
.tool-class-container .class-me-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-9a17b8e6]::after {
  content: '';
  display: block;
  clear: both;
}
.join-group-animation-group[data-v-9a17b8e6] {
  text-align: left;
  width: 400px;
  height: 200px;
  position: relative;
}
.join-group-animation-group img[data-v-9a17b8e6] {
  position: absolute;
}
.join-group-animation-group .ground[data-v-9a17b8e6] {
  z-index: 1;
  bottom: 20px;
  width: 100%;
  animation: flow-data-v-9a17b8e6 2s infinite linear alternate-reverse;
}
.join-group-animation-group .flow[data-v-9a17b8e6] {
  position: absolute;
  z-index: 5;
  top: 0px;
  right: 0px;
  animation: flow-data-v-9a17b8e6 2s infinite linear alternate-reverse;
}
.join-group-animation-group .ground-shadow[data-v-9a17b8e6] {
  z-index: 0;
  width: 100%;
  bottom: -10px;
  animation: flow-data-v-9a17b8e6 5s infinite linear alternate-reverse;
}
.join-group-animation-group .cube[data-v-9a17b8e6] {
  z-index: 2;
  top: -20px;
  animation: flow-data-v-9a17b8e6 3s infinite cubic-bezier(0.02, 0.86, 0.25, 0.97) alternate-reverse;
}
.join-group-animation-group .people[data-v-9a17b8e6] {
  z-index: 3;
  top: -50px;
  left: 110px;
  animation: flow-data-v-9a17b8e6 2s infinite linear alternate-reverse;
}
.join-group-animation-group .message[data-v-9a17b8e6] {
  z-index: 4;
  top: -100px;
  left: 160px;
  animation: blink-data-v-9a17b8e6 3s infinite cubic-bezier(0.2, 0.8, 0.35, 1.1);
}
.join-group-animation-group .book1[data-v-9a17b8e6] {
  z-index: 6;
  top: -150px;
  right: 60px;
  animation: jump-data-v-9a17b8e6 2.5s 0.5s infinite cubic-bezier(0.2, 0.8, 0.35, 1.1);
}
.join-group-animation-group .book2[data-v-9a17b8e6] {
  z-index: 7;
  top: -220px;
  right: -60px;
  animation: jump-data-v-9a17b8e6 2.5s 1s infinite cubic-bezier(0.2, 0.8, 0.35, 1.1);
}
.join-group-animation-group .book3[data-v-9a17b8e6] {
  z-index: 8;
  top: -65px;
  right: -85px;
  animation: jump-data-v-9a17b8e6 2.5s 1.5s infinite cubic-bezier(0.2, 0.8, 0.35, 1.1);
}
.join-group-animation-group .plane1[data-v-9a17b8e6] {
  z-index: 9;
  left: 40px;
  top: 0px;
  animation: fly-data-v-9a17b8e6 5s infinite cubic-bezier(0.2, 0.8, 0.35, 1.1);
}
@keyframes flow-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 0px);
}
100% {
    transform: translate(0px, -10px);
}
}
@-webkit-keyframes flow-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 0px);
}
100% {
    transform: translate(0px, -10px);
}
}
@keyframes blink-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 50px);
    opacity: 0;
}
15% {
    transform: translate(0px, 0px);
    opacity: 1;
}
75% {
    transform: translate(0px, -10px);
    opacity: 1;
}
100% {
    transform: translate(0px, -50px);
    opacity: 0;
}
}
@-webkit-keyframes blink-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 50px);
    opacity: 0;
}
15% {
    transform: translate(0px, 0px);
    opacity: 1;
}
75% {
    transform: translate(0px, -10px);
    opacity: 1;
}
100% {
    transform: translate(0px, -50px);
    opacity: 0;
}
}
@keyframes jump-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 0px);
}
14% {
    transform: translate(0px, -10px);
}
25% {
    transform: translate(0px, 0px);
}
100% {
    transform: translate(0px, 0px);
}
}
@-webkit-keyframes jump-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 0px);
}
14% {
    transform: translate(0px, -10px);
}
25% {
    transform: translate(0px, 0px);
}
100% {
    transform: translate(0px, 0px);
}
}
@keyframes fly-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 0px);
    opacity: 0;
}
15% {
    opacity: 1;
}
30% {
    transform: translate(250px, -200px);
    opacity: 0;
}
100% {
    transform: translate(0px, 0px);
    opacity: 0;
}
}
@-webkit-keyframes fly-data-v-9a17b8e6 {
0% {
    transform: translate(0px, 0px);
    opacity: 0;
}
15% {
    opacity: 1;
}
30% {
    transform: translate(250px, -200px);
    opacity: 0;
}
100% {
    transform: translate(0px, 0px);
    opacity: 0;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-6464af4a]::after {
  content: '';
  display: block;
  clear: both;
}
.group_black[data-v-6464af4a] {
  cursor: pointer;
  margin-top: 32px;
  width: 100%;
  height: 64px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 5px;
}
.group_black .avatar[data-v-6464af4a] {
  display: inline-block;
  float: left;
  margin-top: 8px;
}
.group_black .UserInfo[data-v-6464af4a] {
  display: inline-block;
  float: left;
  height: 36px;
  margin-top: 13px;
  padding-left: 16px;
  padding-right: 16px;
  width: 232px;
  box-sizing: border-box;
}
.group_black .UserInfo .username[data-v-6464af4a] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  font-size: 16px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group_black .UserInfo .usermask[data-v-6464af4a] {
  margin-top: 8px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 14px;
}
.group_black .btns[data-v-6464af4a] {
  display: inline-block;
  float: right;
  margin-top: 12px;
}
.group_black[data-v-6464af4a]:hover {
  background: #F8F8F8;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-6049b40b]::after {
  content: '';
  display: block;
  clear: both;
}
.joinGroup .noGroup[data-v-6049b40b] {
  padding: 32px;
  box-sizing: border-box;
}
.joinGroup .noGroup .noGroup-illustration[data-v-6049b40b] {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-image: url(/./assets/assets_course_nogroup.png);
  background-size: cover;
}
.joinGroup .noGroup .tips[data-v-6049b40b] {
  margin: 24px 0;
  text-align: center;
}
.joinGroup .noGroup .tips .nb-divider[data-v-6049b40b],
.joinGroup .noGroup .tips p[data-v-6049b40b] {
  display: inline-block;
  vertical-align: middle;
}
.joinGroup .noGroup .tips .center-p[data-v-6049b40b] {
  height: 32px;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
  margin: 0 24px;
}
.joinGroup .noGroup .tips .center-p p[data-v-6049b40b] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 16px;
  letter-spacing: 0;
}
.joinGroup .noGroup .tips .nb-divider[data-v-6049b40b] {
  width: 110px;
  vertical-align: middle;
}
.joinGroup .noGroup .CreateGroupBtn[data-v-6049b40b] {
  text-align: center;
}
.joinGroup .GroupList[data-v-6049b40b] {
  padding: 0 24px;
  box-sizing: border-box;
}
.joinGroup .GroupList .pagediv[data-v-6049b40b] {
  text-align: center;
  padding: 32px 0;
  box-sizing: border-box;
}
.btnbutton[data-v-6049b40b] {
  width: 180px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-2c34c916]::after {
  content: '';
  display: block;
  clear: both;
}
.createGroup .createGroup-1[data-v-2c34c916] {
  padding: 32px;
  box-sizing: border-box;
}
.createGroup .createGroup-1 .createGroup-illustration[data-v-2c34c916] {
  width: 234px;
  height: 200px;
  margin: 0 auto;
  background-image: url(/./assets/assets_course_group.png);
  background-size: cover;
}
.createGroup .createGroup-1 .createGroup-illustration2[data-v-2c34c916] {
  width: 300px;
  height: 223px;
  margin: 0 auto;
  background-image: url(/./assets/assets_course_joingroup.png);
  background-size: cover;
}
.createGroup .createGroup-1 .inputGroupInfo[data-v-2c34c916] {
  margin: 24px 0;
}
.createGroup .createGroup-1 .inputGroupInfo .tips[data-v-2c34c916] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  padding-bottom: 8px;
}
.createGroup .createGroup-1 .CreateGroupBtn[data-v-2c34c916] {
  text-align: center;
}
.createGroup .createGroup-1 .CreateGroupBtn2[data-v-2c34c916] {
  text-align: center;
}
.createGroup .createGroup-1 .tips[data-v-2c34c916] {
  margin: 24px 0;
  text-align: center;
}
.createGroup .createGroup-1 .tips .nb-divider[data-v-2c34c916],
.createGroup .createGroup-1 .tips p[data-v-2c34c916] {
  display: inline-block;
  vertical-align: middle;
}
.createGroup .createGroup-1 .tips .center-p[data-v-2c34c916] {
  height: 32px;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
  margin: 0 24px;
}
.createGroup .createGroup-1 .tips .center-p p[data-v-2c34c916] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  line-height: 32px;
  letter-spacing: 0;
}
.createGroup .createGroup-1 .tips .nb-divider[data-v-2c34c916] {
  width: 110px;
  vertical-align: middle;
}
.btnbutton[data-v-2c34c916] {
  width: 180px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-c802105c]::after {
  content: '';
  display: block;
  clear: both;
}
.CreateOrJoinGroup[data-v-c802105c] {
  width: 480px;
}
.CreateOrJoinGroup .CreateOrJoinGroup-tab[data-v-c802105c] {
  padding-top: 24px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-f7338e32]::after {
  content: '';
  display: block;
  clear: both;
}
.group-details-container[data-v-f7338e32] {
  width: 480px;
}
.group-details-container .header .title[data-v-f7338e32] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  display: inline-block;
}
.group-details-container .header .nb-button[data-v-f7338e32] {
  float: right;
  margin-top: -6px;
}
.group-details-container .header .nb-button .iconfont[data-v-f7338e32] {
  margin-right: 8px;
}
.group-details-container .info[data-v-f7338e32] {
  background: url(/./assets/assets_example_background.jpg) no-repeat center;
  background-size: cover;
  border-radius: 5px;
}
.group-details-container .info .mask[data-v-f7338e32] {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background: rgba(68, 68, 68, 0.75);
  text-align: center;
  padding: 16px 0px;
}
.group-details-container .info .nb-avatar[data-v-f7338e32] {
  display: inline-block;
  margin-top: -32px;
  margin-bottom: 16px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 8px;
}
.group-details-container .info .title[data-v-f7338e32] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #FFFFFF;
}
.group-details-container .info .slogan[data-v-f7338e32] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #FFFFFF;
  margin-top: 8px;
}
.group-details-container .user-list .user-block[data-v-f7338e32] {
  margin-bottom: 16px;
}
.group-details-container .user-list .user-block .avatar[data-v-f7338e32] {
  display: inline-block;
  vertical-align: middle;
}
.group-details-container .user-list .user-block .user-info[data-v-f7338e32] {
  width: calc(100% - 150px);
  display: inline-block;
  vertical-align: middle;
  margin-left: 16px;
}
.group-details-container .user-list .user-block .user-info .name[data-v-f7338e32] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.group-details-container .user-list .user-block .user-info .motto[data-v-f7338e32] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-details-container .user-list .user-block .user-info .Creater[data-v-f7338e32] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #FFC107;
}
.group-details-container .user-list .user-block .user-info .Creater i[data-v-f7338e32] {
  margin-left: 8px;
  margin-right: 8px;
  font-size: 16px;
}
.group-details-container .user-list .user-block .nb-button[data-v-f7338e32] {
  float: right;
}
.group-details-container .settings .left[data-v-f7338e32] {
  display: inline-block;
  width: calc(50% - 11px);
}
.group-details-container .settings .right[data-v-f7338e32] {
  display: inline-block;
  width: calc(50% - 11px);
  margin-left: 16px;
  margin-bottom: 16px;
}
.group-details-container .settings .right .note[data-v-f7338e32] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.group-details-container .settings .right .nb-button[data-v-f7338e32] {
  margin-top: 8px;
  width: 100%;
}
.group-details-container .settings .setting-block[data-v-f7338e32] {
  padding: 16px 0px;
}
.group-details-container .settings .setting-block p[data-v-f7338e32] {
  display: inline-block;
}
.group-details-container .settings .setting-block .note[data-v-f7338e32] {
  margin-top: 8px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.group-details-container .settings .setting-block .nb-switch-container[data-v-f7338e32] {
  float: right;
  margin-top: -8px;
}
.group-details-container .full-button[data-v-f7338e32] {
  width: 100%;
  margin-top: 32px;
}
.margin-block-2[data-v-f7338e32] {
  margin: 16px;
}
.margin-block-3[data-v-f7338e32] {
  margin: 24px;
}
.margin-block-4[data-v-f7338e32] {
  margin: 32px;
}
.DismissGroupp[data-v-f7338e32] {
  padding: 24px;
  box-sizing: border-box;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.tool-group-container {
  width: 960px;
  margin: 0 auto;
  padding-top: 96px;
}
.tool-group-container .no-group {
  text-align: center;
}
.tool-group-container .no-group img {
  width: 140px;
  object-fit: cover;
  margin-bottom: 24px;
}
.tool-group-container .no-group .tips {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-bottom: 56px;
}
.tool-group-container .no-group .join-btn {
  width: 120px;
}
.tool-group-container .group-me {
  width: 100%;
  font-size: 0;
  position: relative;
}
.tool-group-container .group-me .abs-block {
  position: absolute;
}
.tool-group-container .group-me .a1 {
  width: 256px;
  height: 256px;
  border-radius: 100%;
  border: 1px dashed #FFC107;
  padding: 8px;
  top: -126px;
  left: -148px;
}
.tool-group-container .group-me .a1 > div {
  background: #FFC107;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.tool-group-container .group-me .a2 {
  width: 32px;
  height: 32px;
  background: #FFC107;
  border-radius: 100%;
  top: -40px;
  left: 172px;
}
.tool-group-container .group-me .a3 {
  width: 90px;
  height: 90px;
  background: #FFC107;
  border-radius: 100%;
  top: 192px;
  left: -120px;
}
.tool-group-container .group-me .group-list {
  width: 600px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.tool-group-container .group-me .group-list p:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.tool-group-container .group-me .group-list .list {
  margin-top: 32px;
  width: 100%;
}
.tool-group-container .group-me .group-list .list .goup-item {
  background: #FFFFFF;
  padding: 24px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 24px;
  font-size: 0;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.tool-group-container .group-me .group-list .list .goup-item .item-inlineblock {
  display: inline-block;
  vertical-align: middle;
}
.tool-group-container .group-me .group-list .list .goup-item .avatar {
  border-bottom: 5px solid #E8E8E8;
}
.tool-group-container .group-me .group-list .list .goup-item .goup-item-right {
  width: calc( 100% - 72px);
  margin-left: 24px;
  height: 60px;
  border-left: 1px solid #E8E8E8;
  box-sizing: border-box;
  font-size: 0;
}
.tool-group-container .group-me .group-list .list .goup-item .goup-item-right .text {
  width: calc(100% - 120px);
  display: inline-block;
  vertical-align: top;
  padding-left: 24px;
  box-sizing: border-box;
  margin-top: 8px;
}
.tool-group-container .group-me .group-list .list .goup-item .goup-item-right .text p:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin-bottom: 8px;
}
.tool-group-container .group-me .group-list .list .goup-item .goup-item-right .text p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.tool-group-container .group-me .group-list .list .goup-item .goup-item-right .nb-button {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  margin-top: 11px;
}
.tool-group-container .group-me .group-other {
  width: 360px;
  display: inline-block;
  vertical-align: top;
}
.tool-group-container .group-me .group-other .joinblock h1 {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.tool-group-container .group-me .group-other .joinblock p {
  margin-top: 8px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.tool-group-container .group-me .group-other .joinblock .sprite {
  margin-top: 80px;
  transform: scale(0.52);
}
.tool-group-container .group-me .group-other .joinblock .blockleft {
  text-align: left;
}
.tool-group-container .group-me .group-other .joinblock .center {
  text-align: center;
  margin-top: 24px;
}
.tool-group-container .group-me .group-other .joinblock .center .nb-button {
  margin-top: 24px;
  width: 165px;
}
.tool-group-container .group-me .group-other .joinblock .center .nb-divider {
  margin-top: 24px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.no-test {
  max-width: 960px;
  text-align: center;
  margin: 32px 0;
  box-sizing: border-box;
  display: inline-block;
}
.no-test .info {
  text-align: center;
  color: #444444;
  margin-top: 120px;
}
.no-test .info .info-left,
.no-test .info .info-center,
.no-test .info .info-right {
  display: inline-block;
  vertical-align: top;
}
.no-test .info .info-left {
  background-image: url(/./assets/js_course_routes_entry2_routes_tool-testpaper_student_no-test_empty_test.png);
  background-size: cover;
  background-position: center;
  width: 146px;
  height: 128px;
  margin-right: 48px;
}
.no-test .info .info-center {
  height: 64px;
  margin-top: 32px;
}
.no-test .info .info-right {
  margin-left: 48px;
  text-align: left;
}
.no-test .info .info-right p:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-bottom: 16px;
}
.no-test .info .info-right p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-bottom: 16px;
}
.no-test .info .info-right p:nth-child(3) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #03A9F4;
  margin-bottom: 16px;
  cursor: pointer;
}
.no-test .info .info-right p:nth-child(4) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #03A9F4;
  cursor: pointer;
  position: relative;
}
.no-test .info .info-right p:nth-child(4) img {
  position: absolute;
  display: none;
  width: 140px;
  height: 190px;
  top: 24px;
  transition: all 0.8s ease;
}
.no-test .info .info-right p:nth-child(4):hover img {
  position: absolute;
  display: block;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.start-test-item {
  width: 100%;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 24px;
  box-sizing: border-box;
  font-size: 0;
  position: relative;
  text-align: left;
  cursor: pointer;
  background: #FFFFFF;
  z-index: 0;
}
.start-test-item .start-test-left,
.start-test-item .start-test-right {
  display: inline-block;
  vertical-align: top;
}
.start-test-item .start-test-left {
  width: calc( 100% - 200px);
  position: relative;
}
.start-test-item .start-test-left .left-label {
  position: absolute;
  height: 14px;
  width: 4px;
  background: #03A9F4;
  top: 0;
  left: 0;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
}
.start-test-item .start-test-left p:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  padding-left: 12px;
  margin-bottom: 16px;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
}
.start-test-item .start-test-left p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
  margin-bottom: 16px;
  padding-left: 12px;
}
.start-test-item .start-test-left p:nth-child(3) {
  padding-left: 12px;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}
.start-test-item .start-test-left p:nth-child(3) span {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-right: 8px;
}
.start-test-item .start-test-right {
  width: 176px;
  text-align: center;
  box-sizing: border-box;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
}
.start-test-item .start-test-right .btn {
  width: 120px;
  display: inline-block;
  margin-left: 40px;
  margin-top: 16px;
}
.start-test-item .start-test-right .fen {
  margin-top: 24px;
  margin-left: 16px;
  font-size: 0;
}
.start-test-item .start-test-right .fen span:nth-child(1) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
}
.start-test-item .start-test-right .fen span:nth-child(2) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  display: inline-block;
  vertical-align: middle;
  color: #03A9F4;
  margin-left: 8px;
}
.start-test-item .start-test-right .loading-start {
  margin-top: 24px;
  margin-left: 16px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.start-test-item .abd {
  position: absolute;
  height: calc(100% - 48px);
  right: 224px;
  top: 24px;
  width: 1px;
  background: #E8E8E8;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
}
.list-state-details-class {
  animation: listanimation 800ms;
  animation-fill-mode: forwards;
}
@keyframes listanimation {
from {
    transform: scale(1);
    opacity: 1;
}
to {
    transform: scale(0.9);
    opacity: 0;
}
}
.details-state-list-class {
  animation: listanimation2 800ms;
  animation-fill-mode: forwards;
}
@keyframes listanimation2 {
from {
    transform: scale(0.8);
    opacity: 0.9;
}
to {
    transform: scale(1);
    opacity: 1;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.details-container {
  margin-bottom: 24px;
}
.details-container .details-container-title {
  position: relative;
  text-align: left;
  margin-bottom: 24px;
}
.details-container .details-container-title .border {
  position: absolute;
  width: 4px;
  height: 100%;
  background: #03A9F4;
  border-radius: 2px;
  left: 0;
  top: 0;
}
.details-container .details-container-title p {
  display: inline-block;
  vertical-align: middle;
}
.details-container .details-container-title p:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin-left: 12px;
}
.details-container .details-container-title p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-left: 8px;
}
.details-container .details-container-title p:nth-child(3) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #03A9F4;
  text-decoration: underline;
  float: right;
  cursor: pointer;
  -webkit-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-65bb7fdc]::after {
  content: '';
  display: block;
  clear: both;
}
.test-history-item-container[data-v-65bb7fdc] {
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  height: 76px;
  float: left;
  padding: 16px;
  box-sizing: border-box;
  margin-right: 16px;
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  font-size: 0;
  margin-bottom: 16px;
  background-image: url(/./assets/assets_testpaper_bg1.jpg);
  background-size: cover;
  cursor: pointer;
  animation: maskloop 20s infinite;
}
.test-history-item-container .history-inle-block[data-v-65bb7fdc] {
  display: inline-block;
  vertical-align: middle;
}
.test-history-item-container .history-index[data-v-65bb7fdc] {
  text-align: center;
  width: 48px;
}
.test-history-item-container .history-index p[data-v-65bb7fdc]:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin-bottom: 8px;
}
.test-history-item-container .history-index p[data-v-65bb7fdc]:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.test-history-item-container .history-text[data-v-65bb7fdc] {
  width: calc( 100% - 48px - 48px);
  padding: 0 16px;
  box-sizing: border-box;
}
.test-history-item-container .history-text p[data-v-65bb7fdc] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  overflow: hidden;
  max-height: 28px;
}
.test-history-item-container .history-value[data-v-65bb7fdc] {
  width: 48px;
  text-align: center;
}
.test-history-item-container .history-value p[data-v-65bb7fdc]:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  margin-bottom: 8px;
}
.test-history-item-container .history-value p:nth-child(1) span[data-v-65bb7fdc] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.test-history-item-container .history-value p[data-v-65bb7fdc]:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.test-history-item-container_err[data-v-65bb7fdc] {
  background-image: url(/./assets/assets_testpaper_bg2.png);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.test-history {
  max-height: 76px;
  -webkit-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  overflow: hidden;
}
.test-history .test-history-item {
  width: 216px;
}
.test-history .test-history-item-one {
  width: 448px;
}
.test-history .test-history-item-nomargin {
  margin-right: 0;
}
@keyframes maskloop {
0% {
    background-position-y: top;
}
50% {
    background-position-y: bottom;
}
100% {
    background-position-y: top;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-ec82ffe2]::after {
  content: '';
  display: block;
  clear: both;
}
.tag[data-v-ec82ffe2] {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 12.5px;
  background: #F8F8F8;
  border: 1px solid #E8E8E8;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition-duration: 0.3s;
}
.tag-active[data-v-ec82ffe2] {
  background-color: #03A9F4 !important;
  color: #FFFFFF !important;
  border-color: #03A9F4 !important;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-12e57532]::after {
  content: '';
  display: block;
  clear: both;
}
.tags[data-v-12e57532] {
  transition: all 0.8s ease;
}
.tags .tap[data-v-12e57532] {
  margin-bottom: 8px;
  margin-right: 8px;
  cursor: pointer;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.test-range {
  -webkit-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.test-range .range-tag {
  -webkit-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 800ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  margin-right: 16px;
  margin-bottom: 16px;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.test-rule .rangelist .guizelist li {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 24px;
}
.test-rule .rangelist .guizelist .bluecolortext {
  color: #03A9F4;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.start-test-details {
  position: absolute;
  width: 960px;
  opacity: 0;
  z-index: 1;
  background: #FFFFFF;
}
.start-test-details .start-test-item {
  box-shadow: none;
  margin-bottom: 0;
}
.start-test-details .divider {
  width: 0%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
}
.start-test-details .details-root {
  overflow: hidden;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
  max-height: 0px;
}
.start-test-details .details-root .loading {
  text-align: center;
  margin: 120px 0;
}
.start-test-details .details-root .loading span {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-left: 8px;
}
.start-test-details .details-root .details-root-main .details-root-main-centent {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  text-align: left;
}
.start-test-details .details-root .details-root-main .seal {
  width: 100%;
  background-image: url(/./assets/assets_testpaper_bg2.png);
}
.start-test-details .details-root .details-root-main .seal .seal-root {
  padding-top: 16px;
  padding-bottom: 8px;
}
.start-test-details .details-root .details-root-main .seal .seal-root .btns {
  width: 100%;
  text-align: center;
}
.start-test-details .details-root .details-root-main .seal .seal-root .btns .nb-button {
  width: 120px;
}
.start-test-details .details-root .details-root-main .seal .seal-root .btns .nb-button:nth-child(1) {
  margin-right: 16px;
}
.start-test-details .details-root .details-root-main .seal .seal-root .mifenxian {
  width: 100%;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  box-sizing: border-box;
  padding-left: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #E8E8E8;
  text-align: left;
}
.start-test-details .details-root-Max {
  max-height: 10000px !important;
}
.details-state-class {
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
  top: 0px !important;
  opacity: 1;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.details-state-class .start-test-item {
  padding: 32px;
}
.details-state-class .start-test-item .start-test-left .left-label {
  transform: translateX(-200px);
  opacity: 0;
}
.details-state-class .start-test-item .start-test-left p:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  padding-left: 8px;
  margin-bottom: 16px;
}
.details-state-class .start-test-item .start-test-left p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  padding-left: 8px;
  margin-bottom: 0;
}
.details-state-class .start-test-item .start-test-left p:nth-child(3) {
  display: none;
}
.details-state-class .start-test-item .start-test-right,
.details-state-class .start-test-item .abd {
  transform: translateX(30px);
  opacity: 0;
}
.details-state-class .divider {
  width: 100%;
}
.details-state-class .details-root {
  max-height: 300px;
}
.start-test-details-relative {
  position: relative;
}
.details-out-state-class {
  animation: detailsout 800ms;
}
@keyframes detailsout {
from {
    top: 0px;
    transform: translateX(0);
    opacity: 1;
}
to {
    top: 0px;
    transform: translateX(200px);
    opacity: 0;
}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.reply-block {
  width: 100%;
  min-height: 38px;
  border-radius: 5px;
  margin-bottom: 8px;
  padding: 8px;
  padding-left: 13px;
  box-sizing: border-box;
  font-size: 0;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  position: relative;
}
.reply-block .nb-checkbox-block {
  display: inline-block;
  vertical-align: top;
}
.reply-block .nb-checkbox-left {
  margin-right: 21px;
}
.reply-block .reply-block-reply {
  word-wrap: break-word;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  display: inline-block;
  vertical-align: top;
  width: 442px;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.reply-block .reply-block-reply p {
  line-height: 22px;
}
.reply-block .reply-error {
  display: inline-block;
  width: 40px;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0;
}
.reply-block .reply-error .reply-icon {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  color: #E91E63;
}
.reply-block .reply-error .reply-text {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  color: #E91E63;
}
.reply-block:hover {
  background: #F8F8F8;
}
.error-style {
  background: rgba(233, 30, 100, 0.05);
  border: 2px solid rgba(233, 30, 100, 0.1);
}
.markdown-container * {
  padding: 8px 32px;
}
.markdown-container video {
  padding: 0px;
  margin: 0px;
  text-indent: 0;
  width: calc(100% + 64px);
  max-height: 320px;
  margin-left: -64px;
}
.markdown-container h1 {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin: 32px 0px;
}
.markdown-container h2 {
  font-size: 24px;
  line-height: 24px;
  font-weight: normal;
  margin: 32px 0px;
}
.markdown-container h3 {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin: 16px 0px;
}
.markdown-container p {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 32px;
  text-align: justify;
  text-indent: 32px;
}
.markdown-container a {
  padding: 0;
}
.markdown-container p:hover {
  background: #F8F8F8;
}
.markdown-container strong {
  padding: 0px;
  font-weight: bolder;
}
.markdown-container hr {
  padding: 0px;
  border: none;
  border-bottom: 1px solid #E8E8E8;
  width: 61.8%;
}
.markdown-container ul {
  margin-left: 32px;
}
.markdown-container ul li {
  list-style-type: disc;
}
.markdown-container ol {
  margin-left: 32px;
}
.markdown-container ol li {
  list-style-type: decimal;
}
.markdown-container blockquote {
  padding: 16px 0px;
  border-left: 4px solid #03A9F4;
}
.markdown-container blockquote p {
  text-align: center;
  text-indent: 0;
}
.markdown-container blockquote::before {
  content: "Quote:";
  float: left;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #03A9F4;
  margin-left: 8px;
}
.markdown-container .p-img {
  text-indent: 0;
  text-align: center;
  cursor: pointer;
  line-height: 0;
  margin: 0;
  padding: 0;
}
.markdown-container .img-div {
  object-fit: cover;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  text-indent: 0;
}
.markdown-container .img-div-animation {
  max-width: 80%;
  animation: flowbackground 60s alternate infinite linear;
  -webkit-animation: flowbackground 60s alternate infinite linear;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  min-height: 320px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  margin: 16px auto;
  margin-bottom: 8px;
}
.markdown-container .img-div-animation:before {
  content: "\70B9\51FB\67E5\770B\5B8C\6574\957F\56FE";
  background: #9E9E9E;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #FFFFFF;
  border-radius: 50px;
  position: absolute;
  bottom: 16px;
  text-indent: 0;
  padding: 12px 16px;
  left: calc(50% - 64px);
}
@keyframes flowbackground {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
@-webkit-keyframes flowbackground {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
.markdown-container li {
  padding-left: 0px;
}
.markdown-container li p {
  padding-left: 0px !important;
  text-indent: initial !important;
  margin: 0px !important;
  line-height: 16px !important;
}
.markdown-container li p:hover {
  background: none !important;
}
.markdown-container .p-img-describe {
  position: relative;
  text-indent: 0;
  padding: 8px;
  display: inline-block;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid #E8E8E8;
}
.markdown-container img {
  padding: 0px;
  max-width: 100%;
  max-height: 320px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  margin: 16px 0px;
  margin-bottom: 8px;
}
.markdown-container code:not([class]) {
  color: #03A9F4;
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  padding: 2px 4px;
}
.markdown-container pre {
  padding: 0px;
}
.markdown-container pre code {
  margin: 16px;
  border-radius: 5px;
  display: block;
  line-height: 22px;
  padding: 16px;
  background: #444444;
  color: #FFFFFF;
}
.markdown-container pre code * {
  padding: 0px;
}
.markdown-container table {
  margin: 8px auto;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: #E8E8E8 0px 0px 0px 1px;
}
.markdown-container table th,
.markdown-container table tr,
.markdown-container table td {
  border: 1px solid #E8E8E8;
}
.markdown-container .element-enable-question {
  padding: 0px !important;
  position: relative;
}
.markdown-container .element-enable-question:hover .element-submit-question {
  opacity: 1;
  transform: translate(0px, 0px);
}
.markdown-container .element-submit-question {
  opacity: 0;
  position: absolute;
  right: 16px;
  top: 16px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 16px;
  color: #FFFFFF;
  background: #444444;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transform: translate(0px, 8px);
}
.markdown-container p {
  text-indent: 0px !important;
  padding: 0;
}
.markdown-container p:hover {
  background: transparent !important;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.test-q-container {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 0;
  border-left: 4px solid #FFFFFF;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.test-q-container .test-q-left {
  width: 64px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}
.test-q-container .test-q-right {
  word-break: break-all;
  width: calc( 100% - 64px);
  padding-right: 24px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  text-align: left;
  display: inline-block;
  vertical-align: top;
}
.test-q-container .test-q-right .answer-container {
  box-sizing: border-box;
}
.test-q-container .embar {
  pointer-events: none;
}
.test-q-container .test-q-title {
  width: 100%;
  font-size: 0;
  margin-bottom: 16px;
}
.test-q-container .test-q-me-answer {
  width: 100%;
  font-size: 0;
}
.test-q-container .test-q-me-answer .test-q-left {
  padding-top: 13px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.test-q-container .test-q-me-answer-end {
  width: 100%;
  font-size: 0;
}
.test-q-container .test-q-me-answer-end .test-q-left-end {
  width: 64px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}
.test-q-container .test-q-me-answer-end .test-q-right-end {
  width: calc( 100% - 64px);
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  text-align: left;
  display: inline-block;
  vertical-align: top;
}
.test-q-container .test-q-me-answer-end .test-q-right-end .test-q-right-header {
  width: 100%;
  height: 12px;
  padding-bottom: 16px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.test-q-container .test-q-me-answer-end .test-q-right-end .test-q-right-header .test-q-right-header-text {
  width: 48px;
  float: left;
  margin-right: 16px;
}
.test-q-container .test-q-me-answer-end .test-q-right-end .answer-container {
  padding-right: 24px;
  box-sizing: border-box;
}
.test-q-container .test-q-answer {
  width: 100%;
  font-size: 0;
}
.test-q-container .test-q-answer .test-q-left {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  padding-top: 13px;
  color: #444444;
}
.test-q-container .test-q-tips {
  max-height: 0px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  overflow: hidden;
  transition: all 0.3s ease;
}
.test-q-container:hover {
  border-left: 4px solid #03A9F4;
}
.tqend {
  border-left: 4px solid #E8E8E8;
}
.tqerror {
  border-left: 4px solid #E91E63 !important;
}
.markdown-container * {
  padding: 8px 32px;
}
.markdown-container video {
  padding: 0px;
  margin: 0px;
  text-indent: 0;
  width: calc(100% + 64px);
  max-height: 320px;
  margin-left: -64px;
}
.markdown-container h1 {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin: 32px 0px;
}
.markdown-container h2 {
  font-size: 24px;
  line-height: 24px;
  font-weight: normal;
  margin: 32px 0px;
}
.markdown-container h3 {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  margin: 16px 0px;
}
.markdown-container p {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 32px;
  text-align: justify;
  text-indent: 32px;
}
.markdown-container a {
  padding: 0;
}
.markdown-container p:hover {
  background: #F8F8F8;
}
.markdown-container strong {
  padding: 0px;
  font-weight: bolder;
}
.markdown-container hr {
  padding: 0px;
  border: none;
  border-bottom: 1px solid #E8E8E8;
  width: 61.8%;
}
.markdown-container ul {
  margin-left: 32px;
}
.markdown-container ul li {
  list-style-type: disc;
}
.markdown-container ol {
  margin-left: 32px;
}
.markdown-container ol li {
  list-style-type: decimal;
}
.markdown-container blockquote {
  padding: 16px 0px;
  border-left: 4px solid #03A9F4;
}
.markdown-container blockquote p {
  text-align: center;
  text-indent: 0;
}
.markdown-container blockquote::before {
  content: "Quote:";
  float: left;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #03A9F4;
  margin-left: 8px;
}
.markdown-container .p-img {
  text-indent: 0;
  text-align: center;
  cursor: pointer;
  line-height: 0;
  margin: 0;
  padding: 0;
}
.markdown-container .img-div {
  object-fit: cover;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  text-indent: 0;
}
.markdown-container .img-div-animation {
  max-width: 80%;
  animation: flowbackground 60s alternate infinite linear;
  -webkit-animation: flowbackground 60s alternate infinite linear;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  min-height: 320px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  margin: 16px auto;
  margin-bottom: 8px;
}
.markdown-container .img-div-animation:before {
  content: "\70B9\51FB\67E5\770B\5B8C\6574\957F\56FE";
  background: #9E9E9E;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #FFFFFF;
  border-radius: 50px;
  position: absolute;
  bottom: 16px;
  text-indent: 0;
  padding: 12px 16px;
  left: calc(50% - 64px);
}
@keyframes flowbackground {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
@-webkit-keyframes flowbackground {
0% {
    background-position: 50% 0%;
}
100% {
    background-position: 50% 100%;
}
}
.markdown-container li {
  padding-left: 0px;
}
.markdown-container li p {
  padding-left: 0px !important;
  text-indent: initial !important;
  margin: 0px !important;
  line-height: 16px !important;
}
.markdown-container li p:hover {
  background: none !important;
}
.markdown-container .p-img-describe {
  position: relative;
  text-indent: 0;
  padding: 8px;
  display: inline-block;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid #E8E8E8;
}
.markdown-container img {
  padding: 0px;
  max-width: 100%;
  max-height: 320px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  margin: 16px 0px;
  margin-bottom: 8px;
}
.markdown-container code:not([class]) {
  color: #03A9F4;
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  padding: 2px 4px;
}
.markdown-container pre {
  padding: 0px;
}
.markdown-container pre code {
  margin: 16px;
  border-radius: 5px;
  display: block;
  line-height: 22px;
  padding: 16px;
  background: #444444;
  color: #FFFFFF;
}
.markdown-container pre code * {
  padding: 0px;
}
.markdown-container table {
  margin: 8px auto;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: #E8E8E8 0px 0px 0px 1px;
}
.markdown-container table th,
.markdown-container table tr,
.markdown-container table td {
  border: 1px solid #E8E8E8;
}
.markdown-container .element-enable-question {
  padding: 0px !important;
  position: relative;
}
.markdown-container .element-enable-question:hover .element-submit-question {
  opacity: 1;
  transform: translate(0px, 0px);
}
.markdown-container .element-submit-question {
  opacity: 0;
  position: absolute;
  right: 16px;
  top: 16px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 16px;
  color: #FFFFFF;
  background: #444444;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transform: translate(0px, 8px);
}
.markdown-container p {
  text-indent: 0px !important;
  padding: 0;
}
.markdown-container p:hover {
  background: transparent !important;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-29e01556]::after {
  content: '';
  display: block;
  clear: both;
}
.header[data-v-29e01556] {
  width: 100%;
}
.header .header-title[data-v-29e01556] {
  width: 100%;
  min-height: 24px;
  margin-bottom: 16px;
}
.header .header-title .header-title-text[data-v-29e01556] {
  display: inline-block;
  overflow: hidden;
  width: 540px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.header .header-title .header-title-sign[data-v-29e01556] {
  float: right;
  width: 88px;
  height: 24px;
  border-radius: 10px 0 10px 0;
  text-align: center;
  background: #E8E8E8;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 24px;
}
.header .header-title .header-title-formal[data-v-29e01556] {
  background: #03A9F4;
}
.header .header-subtext[data-v-29e01556] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-2e3de0b8]::after {
  content: '';
  display: block;
  clear: both;
}
.look-test-modal-conrainer[data-v-2e3de0b8] {
  width: 720px;
  padding: 32px;
  box-sizing: border-box;
  background: #FFFFFF;
}
.look-test-modal-conrainer .look-test-modal-header[data-v-2e3de0b8] {
  margin-bottom: 32px;
}
.look-test-modal-conrainer .test-history-item-head[data-v-2e3de0b8] {
  width: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.start-test {
  width: 960px;
  box-sizing: border-box;
  margin: 0 auto;
}
.start-test .test-head {
  width: 960px;
  margin: 0 auto;
  text-align: left;
  height: 44px;
}
.start-test .test-head .test-head-back,
.start-test .test-head .test-head-toptile {
  display: inline-block;
  vertical-align: middle;
}
.start-test .test-head .test-head-back {
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
  height: 100%;
  max-width: 0;
  padding-right: 0;
  margin-right: 0;
  border-right: none;
  overflow: hidden;
  opacity: 0.6;
}
.start-test .test-head .test-head-back .back-btn {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  background: #444444;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
.start-test .test-head .test-head-back .back-btn i {
  font-size: 16px;
  color: #FFFFFF;
}
.start-test .test-head .test-head-back-details {
  opacity: 1;
  max-width: 100px;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid #E8E8E8;
}
.start-test .test-head .test-head-toptile .test-head-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.start-test .test-head .test-head-toptile .test-head-time-title {
  margin-top: 8px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.start-test .start-test-main {
  box-sizing: border-box;
  position: relative;
  margin-top: 32px;
}
.start-test .start-test-main .list-state-details-class {
  animation: listanimation 800ms;
  animation-fill-mode: forwards;
}
@keyframes listanimation {
from {
    transform: scale(1);
    opacity: 1;
}
to {
    transform: scale(0.9);
    opacity: 0;
}
}
.start-test .start-test-main .details-state-list-class {
  animation: listanimation2 800ms;
  animation-fill-mode: forwards;
}
@keyframes listanimation2 {
from {
    transform: scale(0.8);
    opacity: 0.9;
}
to {
    transform: scale(1);
    opacity: 1;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.end-test {
  height: 160px;
  background-image: url(/./assets/assets_testpaper_bg2.png);
  animation: maskloop 20s infinite;
  width: 100%;
  cursor: pointer;
  text-align: center;
  padding: 32px 48px;
  box-sizing: border-box;
}
.end-test .left {
  display: inline-block;
  vertical-align: top;
  float: left;
  min-width: 128px;
  text-align: left;
  margin-top: 14px;
}
.end-test .left .left-maxtitle {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  font-size: 48px;
  line-height: 48px;
}
.end-test .left .left-mintitle {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.end-test .center {
  display: inline-block;
  vertical-align: top;
  line-height: 96px;
  max-width: calc(100% - 48px - 125px - 48px - 48px);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.end-test .center .center-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  line-height: 96px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.end-test .right {
  display: inline-block;
  vertical-align: top;
  float: right;
  margin-top: 14px;
}
.end-test .right .right-maxtitle {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  font-size: 48px;
  line-height: 48px;
}
.end-test .right .right-mintitle {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  margin-top: 8px;
}
.end-test .right .maxtitleblue {
  color: #03A9F4;
}
.end-test .right .maxtitlefalse {
  color: #E91E63;
}
.endtestbg {
  background-image: url(/./assets/assets_testpaper_bg1.jpg);
  background-repeat: repeat-x;
}
@keyframes maskloop {
0% {
    background-position-y: top;
}
50% {
    background-position-y: bottom;
}
100% {
    background-position-y: top;
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.no-start-test {
  position: relative;
  padding: 24px;
  font-size: 0;
  box-sizing: border-box;
}
.no-start-test .no-start-test-left {
  width: calc( 100% - 184px);
  display: inline-block;
  vertical-align: top;
}
.no-start-test .no-start-test-left .no-start-test-left-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: normal;
  margin-bottom: 16px;
}
.no-start-test .no-start-test-border {
  height: calc(100% - 48px);
  position: absolute;
  right: 208px;
  width: 3px;
  top: 24px;
  background: #E8E8E8;
}
.no-start-test .no-start-test-right {
  width: 184px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding-top: 16px;
}
.no-start-test .no-start-test-right .nb-button {
  width: 120px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.student-container {
  width: 100%;
  text-align: center;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-7f305156]::after {
  content: '';
  display: block;
  clear: both;
}
.round-bar-container[data-v-7f305156] {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.round-bar-container .svgclass[data-v-7f305156] {
  position: absolute;
  left: 0;
  top: 0;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-69df66f5]::after {
  content: '';
  display: block;
  clear: both;
}
.round-bar-container[data-v-69df66f5] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.round-bar-container .rect[data-v-69df66f5] {
  width: 50%;
  height: 100%;
  display: inline-block;
  position: absolute;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
}
.round-bar-container .rect .circle[data-v-69df66f5] {
  position: absolute;
  overflow: hidden;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.round-bar-container .rect[data-v-69df66f5]:nth-child(1) {
  left: 0;
}
.round-bar-container .rect:nth-child(1) .circle[data-v-69df66f5] {
  left: 0;
  transform-origin: 100% 50%;
}
.round-bar-container .rect[data-v-69df66f5]:nth-child(2) {
  right: 0;
}
.round-bar-container .rect:nth-child(2) .circle[data-v-69df66f5] {
  right: 0;
  transform-origin: 0% 50%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-6156db73]::after {
  content: '';
  display: block;
  clear: both;
}
.countdown-container[data-v-6156db73] {
  width: 256px;
  padding-bottom: 24px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.09), 0 20px 30px 0 rgba(0, 0, 0, 0.03);
}
.countdown-container .countdown-top[data-v-6156db73] {
  height: 18px;
  text-align: center;
}
.countdown-container .countdown-top .divider-vertical[data-v-6156db73] {
  display: inline-block;
  height: 100%;
}
.countdown-container .countdown-center[data-v-6156db73] {
  padding-top: 16px;
  padding-bottom: 24px;
  text-align: center;
}
.countdown-container .countdown-center .countdown-main[data-v-6156db73] {
  width: 120px;
  height: 120px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.09), 0 20px 30px 0 rgba(0, 0, 0, 0.03);
  border-radius: 50%;
  display: inline-block;
  font-size: 0;
  position: relative;
}
.countdown-container .countdown-center .countdown-main .countdown-main2[data-v-6156db73] {
  width: 112px;
  height: 112px;
  position: absolute;
  top: 4px;
  left: 4px;
}
.countdown-container .countdown-center .countdown-main .countdown-main2 .countdown-main3[data-v-6156db73] {
  width: 104px;
  height: 104px;
  position: absolute;
  top: 4px;
  left: 4px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.09);
  border-radius: 50%;
  display: inline-block;
  font-size: 0;
}
.countdown-container .countdown-center .countdown-main .countdown-main2 .countdown-main3 .pointer[data-v-6156db73] {
  width: 6px;
  height: 52px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 100%;
  position: absolute;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.countdown-container .countdown-center .countdown-main .countdown-main2 .countdown-main3 .pointer span[data-v-6156db73] {
  background: #444444;
  width: 100%;
  height: 32px;
  top: 0;
  display: inline-block;
  border-radius: 4px;
}
.countdown-container .countdown-down[data-v-6156db73] {
  position: relative;
  margin-bottom: 24px;
  font-size: 0;
}
.countdown-container .countdown-down .inline-block[data-v-6156db73] {
  display: inline-block;
}
.countdown-container .countdown-down .countdown-down-left[data-v-6156db73],
.countdown-container .countdown-down .countdown-down-right[data-v-6156db73] {
  width: 50%;
  text-align: center;
}
.countdown-container .countdown-down .countdown-down-left p[data-v-6156db73]:nth-child(1),
.countdown-container .countdown-down .countdown-down-right p[data-v-6156db73]:nth-child(1) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.countdown-container .countdown-down .countdown-down-left p[data-v-6156db73]:nth-child(2),
.countdown-container .countdown-down .countdown-down-right p[data-v-6156db73]:nth-child(2) {
  margin-top: 8px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.countdown-container .countdown-down .down-divider-vertical[data-v-6156db73] {
  position: absolute;
  left: 50%;
  top: 0px;
  height: 100%;
  width: 1px;
}
.countdown-container .slotstyle[data-v-6156db73] {
  text-align: center;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-3c67abba]::after {
  content: '';
  display: block;
  clear: both;
}
.testing[data-v-3c67abba] {
  margin: auto;
  margin-top: 32px;
  width: 1008px;
  box-sizing: border-box;
  background: #FFFFFF;
}
.testing .testing-time[data-v-3c67abba] {
  width: 256px;
  float: left;
  box-sizing: border-box;
  position: fixed;
}
.testing .testing-time .countdown-btns[data-v-3c67abba] {
  width: 100%;
  padding: 0 24px;
  text-align: center;
  box-sizing: border-box;
}
.testing .testing-time .countdown-btns .countdown-btn[data-v-3c67abba] {
  display: inline-block;
  width: 100%;
}
.testing .testing-testpaper[data-v-3c67abba] {
  float: right;
  width: 720px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.testing .testing-testpaper .testpaper-up[data-v-3c67abba] {
  width: 100%;
  box-sizing: border-box;
}
.testing .testing-testpaper .testpaper-up .testpaper-head[data-v-3c67abba] {
  padding: 32px;
  box-sizing: border-box;
}
.testing .testing-testpaper .testpaper-up .testpaper-head .divider-d[data-v-3c67abba] {
  margin-top: 32px;
}
.testing .testing-testpaper .testpaper-down[data-v-3c67abba] {
  width: 100%;
  height: 86px;
  background-image: url(/./assets/assets_testpaper_bg2.png);
  box-sizing: border-box;
  padding: 24px 0;
  text-align: center;
}
.testing .testing-testpaper .testpaper-down .submit-testpaper[data-v-3c67abba] {
  width: 208px;
}
.testing .remove-modal[data-v-3c67abba] {
  padding: 24px;
}
.testing .remove-modal .big-title[data-v-3c67abba] {
  padding: 8px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.theLastFewDays .Day {
  position: relative;
  border-radius: 8px;
  margin-bottom: 16px;
  cursor: pointer;
}
.theLastFewDays .Day .mask {
  position: absolute;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: top;
  animation: maskloop 20s infinite;
}
.theLastFewDays .Day .mask2 {
  position: absolute;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #FFFFFF;
  opacity: 0.8;
  transition: all 0.3s ease;
}
.theLastFewDays .Day .mask2actice {
  background-color: #03A9F4 !important;
}
@keyframes maskloop {
0% {
    background-position-y: top;
}
50% {
    background-position-y: bottom;
}
100% {
    background-position-y: top;
}
}
.theLastFewDays .Day .root {
  position: relative;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 48px;
  font-size: 0;
  border-radius: 8px;
}
.theLastFewDays .Day .root .day-name {
  display: inline-block;
  width: 50%;
  padding-left: 24px;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  line-height: 48px;
  box-sizing: border-box;
  text-align: left;
}
.theLastFewDays .Day .root .day-desc {
  display: inline-block;
  width: 50%;
  padding-right: 24px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 48px;
  box-sizing: border-box;
  text-align: right;
}
.theLastFewDays .Day .root .day-desc span:nth-child(1) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.theLastFewDays .Day .root .day-desc span:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
}
.theLastFewDays .Day:hover .mask2 {
  background: #F8F8F8;
}
.theLastFewDays .isd {
  height: 80px;
}
.theLastFewDays .isd .root {
  line-height: 80px;
}
.theLastFewDays .isd .root .day-name {
  line-height: 80px;
  color: #444444 !important;
}
.theLastFewDays .isd .root .day-desc {
  line-height: 80px;
  color: #444444 !important;
}
.theLastFewDays .isd .root .day-desc span {
  color: #444444 !important;
}
.theLastFewDays .isdactive .root .day-name {
  color: #FFFFFF !important;
}
.theLastFewDays .isdactive .root .day-desc {
  color: #FFFFFF !important;
}
.theLastFewDays .isdactive .root .day-desc span {
  color: #FFFFFF !important;
}
.theLastFewDays .noisd {
  height: 48px;
}
.theLastFewDays .noisd .root {
  line-height: 48px;
}
.theLastFewDays .noisd .root .day-name {
  line-height: 48px;
  color: #444444 !important;
}
.theLastFewDays .noisd .root .day-name span {
  color: #444444 !important;
}
.theLastFewDays .noisd .root .day-desc {
  line-height: 48px;
  color: #444444 !important;
}
.theLastFewDays .noisd .root .day-desc span {
  color: #444444 !important;
}
.theLastFewDays .noisdactive .root .day-name {
  color: #FFFFFF !important;
}
.theLastFewDays .noisdactive .root .day-desc {
  color: #FFFFFF !important;
}
.theLastFewDays .noisdactive .root .day-desc span {
  color: #FFFFFF !important;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease;
}
.fade-enter {
  transform: translateY(10px);
  opacity: 0;
}
.fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.calendar {
  width: 100%;
}
.calendar .calendar-current {
  text-align: center;
}
.calendar .calendar-current .nb-button {
  display: inline-block;
  vertical-align: middle;
}
.calendar .calendar-current .left {
  float: left;
}
.calendar .calendar-current .right {
  float: right;
}
.calendar .clear {
  clear: both;
}
.calendar .calendar-centent {
  font-size: 0;
  margin-top: 16px;
}
.calendar .calendar-centent .day {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: all 0.1s ease;
}
.calendar .calendar-centent .day p {
  margin-top: 8px;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.calendar .calendar-centent .day .state {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background: #03A9F4;
  display: inline-block;
  left: 15px;
  bottom: 6px;
}
.calendar .calendar-centent .day .state-danger {
  background: #E91E63;
}
.calendar .calendar-centent .day:hover {
  background: #f4f4f4;
}
.calendar .calendar-centent .month p {
  color: #444444;
  font-weight: bold;
  letter-spacing: 0;
}
.calendar .calendar-centent .dayactive {
  background: #03A9F4 !important;
}
.calendar .calendar-centent .dayactive p {
  color: #FFFFFF !important;
}
.calendar .calendar-centent .dayactive .state {
  background: #FFFFFF !important;
}
.calendar .calendar-centent .day:nth-child(7n) {
  margin-right: 0px;
}
.calendar .calendar-centent .day_title {
  width: 32px;
  height: 24px;
  margin-bottom: 8px;
  margin-right: 8px;
  display: inline-block;
  text-align: center;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.calendar .calendar-centent .day_title:nth-child(7) {
  margin-right: 0px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.testpaper-menu {
  width: 100%;
  min-width: 320px;
}
.testpaper-menu .the-last-few-days {
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
.testpaper-menu .clear {
  clear: both;
}
.testpaper-menu .divider {
  padding: 0 32px;
  margin-top: 32px;
}
.testpaper-menu .calendar-div {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-659c6b19]::after {
  content: '';
  display: block;
  clear: both;
}
.testpaper-left-menu[data-v-659c6b19] {
  width: 320px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  border-right: 1px solid #E8E8E8;
}
.testpaper-left-menu .menu-title[data-v-659c6b19] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin-bottom: 32px;
}
.testpaper-left-menu .menu-title2[data-v-659c6b19] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  text-align: center;
  margin: 16px 0;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.testpaper {
  width: 100%;
}
.testpaper .testpaper-main {
  width: 100%;
  margin-top: 32px;
  font-size: 0;
  min-width: 1024px;
  min-height: calc( 100vh - 80px - 140px - 128px);
}
.testpaper .testpaper-main .testpaper-right-content {
  width: calc(100% - 320px);
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  padding-left: 32px;
  padding-right: 32px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-9ca994c6]::after {
  content: '';
  display: block;
  clear: both;
}
.task-empty[data-v-9ca994c6] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 120px;
  padding-bottom: 240px;
}
.task-empty img.empty-test[data-v-9ca994c6] {
  height: 128px;
}
.task-empty .line[data-v-9ca994c6] {
  width: 1px;
  height: 64px;
  background-color: #E8E8E8;
  margin: 0 48px;
}
.task-empty .a-btn[data-v-9ca994c6] {
  display: block;
  color: #03A9F4;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.task-empty .no-face[data-v-9ca994c6] {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 24px;
}
.task-empty .no-face:hover .qrcode[data-v-9ca994c6] {
  opacity: 1;
  transform: translateY(24px);
}
.task-empty .qrcode[data-v-9ca994c6] {
  position: absolute;
  width: 144px;
  display: block;
  left: 0;
  opacity: 0;
  transform: translateY(-16px);
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.task-empty .text > *[data-v-9ca994c6] {
  margin: 16px 0;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-3aa47962]::after {
  content: '';
  display: block;
  clear: both;
}
.card-title-container[data-v-3aa47962] {
  width: 100%;
  height: 62px;
  position: relative;
  padding: 24px;
  box-sizing: border-box;
}
.card-title-container .left-title[data-v-3aa47962] {
  border-left: 4px solid #03A9F4;
  padding-left: 8px;
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
}
.card-title-container .right-content[data-v-3aa47962] {
  display: inline-block;
  vertical-align: top;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat::after {
  content: '';
  display: block;
  clear: both;
}
.circle-state {
  display: inline-block;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}
.circle-state .state-canvas {
  position: relative;
}
.circle-state .state-canvas .state-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.circle-state .state-canvas .state-num .main-num {
  display: inline-block;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.circle-state .state-canvas .state-num .main-num p:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.circle-state .state-canvas .state-num .main-num p:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.circle-state .state-block {
  padding: 4px 8px;
  display: inline-block;
  border-radius: 25px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #FFFFFF;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-0f44b29a]::after {
  content: '';
  display: block;
  clear: both;
}
.comment-view[data-v-0f44b29a] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
}
.comment-view .comment-end[data-v-0f44b29a] {
  padding: 24px;
}
.comment-view .comment-end .emijo[data-v-0f44b29a] {
  display: inline-block;
}
.comment-view .comment-end .emijo img[data-v-0f44b29a] {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
}
.comment-view .comment-end .emijo span[data-v-0f44b29a] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 27px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  font-weight: bold;
}
.comment-view .comment-end .emijo .divider[data-v-0f44b29a] {
  margin: 0 50px;
  height: 50px;
  width: 1px;
}
.comment-view .comment-end .text[data-v-0f44b29a] {
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  text-align: center;
  width: 650px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-view .comment-end .text .font[data-v-0f44b29a] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
}
.over-view-container[data-v-0f44b29a] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
}
.over-view-container .over-view-content[data-v-0f44b29a] {
  font-size: 0;
}
.over-view-container .over-view-content .over-view-schedule[data-v-0f44b29a] {
  padding-right: 24px;
  box-sizing: border-box;
}
.over-view-container .over-view-content .over-view-schedule .i-block[data-v-0f44b29a] {
  display: inline-block;
  vertical-align: middle;
}
.over-view-container .over-view-content .over-view-schedule .task-text[data-v-0f44b29a] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 24px;
  width: calc(100% - 124px - 180px);
}
.over-view-container .over-view-content .over-view-schedule .over-view-btns[data-v-0f44b29a] {
  width: 180px;
}
.over-view-container .over-view-content .over-view-schedule .over-view-btns .nb-button[data-v-0f44b29a] {
  width: 180px;
}
.over-view-container .over-view-content .over-view-schedule .over-view-btns .nb-button[data-v-0f44b29a]:nth-child(1) {
  margin-bottom: 8px;
}
.over-view-container .over-view-content .over-view-end[data-v-0f44b29a] {
  padding: 24px;
}
.over-view-container .over-view-content .over-view-end span[data-v-0f44b29a] {
  display: inline-block;
  vertical-align: middle;
}
.over-view-container .over-view-content .over-view-end span[data-v-0f44b29a]:nth-child(1) {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #8BC34A;
  text-align: center;
  line-height: 32px;
}
.over-view-container .over-view-content .over-view-end span:nth-child(1) i[data-v-0f44b29a] {
  font-size: 16px;
  color: #FFFFFF;
}
.over-view-container .over-view-content .over-view-end span[data-v-0f44b29a]:nth-child(2) {
  padding-left: 24px;
}
.over-view-container .over-view-content .over-view-end span:nth-child(2) p[data-v-0f44b29a]:nth-child(1) {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #8BC34A;
  margin-bottom: 8px;
}
.over-view-container .over-view-content .over-view-end span:nth-child(2) p[data-v-0f44b29a]:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-13862056]::after {
  content: '';
  display: block;
  clear: both;
}
.text-result-container[data-v-13862056] {
  padding-bottom: 16px;
  box-sizing: border-box;
}
.text-result-container .text-result-title[data-v-13862056] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  padding-bottom: 16px;
}
.text-result-container .show-text p[data-v-13862056] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.text-result-container .dis-text[data-v-13862056] {
  padding: 8px 16px;
  border: 1px solid #E8E8E8;
  border-radius: 4px;
}
.text-result-container .dis-text p[data-v-13862056] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #9E9E9E;
}
.text-result-container .input-text[data-v-13862056] {
  position: relative;
}
.text-result-container .input-text .textarea-input[data-v-13862056] textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 100%;
  min-height: 156px;
}
.text-result-container .input-text .right-span-btn[data-v-13862056] {
  position: absolute;
  right: 4px;
  top: 4px;
  display: inline-block;
  border-radius: 5px;
  background: #8BC34A;
  color: #FFFFFF;
  padding: 4px;
  cursor: pointer;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-3b0672ec]::after {
  content: '';
  display: block;
  clear: both;
}
.attachment-container[data-v-3b0672ec] {
  position: relative;
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  box-sizing: border-box;
}
.attachment-container .pre-container[data-v-3b0672ec] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.attachment-container .pre-container .pre[data-v-3b0672ec] {
  height: 100%;
}
.attachment-container .pre-container .pre--1[data-v-3b0672ec] {
  background: #F8F8F8;
}
.attachment-container .pre-container .pre-0[data-v-3b0672ec] {
  background: #03A9F4;
  opacity: 0.1;
}
.attachment-container .pre-container .pre-1[data-v-3b0672ec] {
  background: #8BC34A;
  opacity: 0.1;
}
.attachment-container .pre-container .pre-2[data-v-3b0672ec] {
  background: #E91E63;
  opacity: 0.1;
}
.attachment-container .default-con[data-v-3b0672ec] {
  position: relative;
  font-size: 0;
  padding: 8px;
}
.attachment-container .default-con .i-block[data-v-3b0672ec] {
  display: inline-block;
  vertical-align: middle;
}
.attachment-container .default-con i[data-v-3b0672ec] {
  font-size: 24px;
  line-height: 24px;
  color: #9E9E9E;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.attachment-container .default-con .attachment-name[data-v-3b0672ec] {
  width: calc(100% - 80px  - 24px);
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  line-height: 20px;
}
.attachment-container .default-con .attachment-name2[data-v-3b0672ec] {
  width: calc(100% - 28px  - 24px);
}
.attachment-container .default-con .btns[data-v-3b0672ec] {
  text-align: right;
  width: 80px;
}
.attachment-container .default-con .btns span[data-v-3b0672ec] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  cursor: pointer;
}
.attachment-container .default-con .btns .divider[data-v-3b0672ec] {
  height: 8px;
  margin: 0 8px;
}
.attachment-container .default-con .btns .delbtn[data-v-3b0672ec] {
  color: #E91E63;
}
.attachment-container .default-con .btns .downbtn[data-v-3b0672ec] {
  color: #03A9F4;
}
.attachment-container .default-con .btns2[data-v-3b0672ec] {
  width: 28px;
}
.attachment-container .upload-con[data-v-3b0672ec] {
  position: relative;
  font-size: 0;
  padding: 8px;
}
.attachment-container .upload-con .i-block[data-v-3b0672ec] {
  display: inline-block;
  vertical-align: middle;
}
.attachment-container .upload-con .icon-span[data-v-3b0672ec] {
  width: 88px;
  font-size: 0;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.attachment-container .upload-con .icon-span .icon-i[data-v-3b0672ec] {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}
.attachment-container .upload-con .icon-span .icon-i i[data-v-3b0672ec] {
  font-size: 24px;
  line-height: 24px;
  color: #03A9F4;
}
.attachment-container .upload-con .icon-span .icon-s1[data-v-3b0672ec] {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: #8BC34A;
}
.attachment-container .upload-con .icon-span .icon-s1 i[data-v-3b0672ec] {
  font-size: 16px;
  color: #FFFFFF;
}
.attachment-container .upload-con .icon-span .icon-s2[data-v-3b0672ec] {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: #E91E63;
}
.attachment-container .upload-con .icon-span .icon-s2 i[data-v-3b0672ec] {
  font-size: 16px;
  color: #FFFFFF;
}
.attachment-container .upload-con .icon-span .icon-text[data-v-3b0672ec] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  padding-left: 8px;
  display: inline-block;
  vertical-align: middle;
}
.attachment-container .upload-con .icon-span .icon-text-state-0[data-v-3b0672ec] {
  color: #03A9F4;
}
.attachment-container .upload-con .icon-span .icon-text-state-1[data-v-3b0672ec] {
  color: #8BC34A;
}
.attachment-container .upload-con .icon-span .icon-text-state-2[data-v-3b0672ec] {
  color: #E91E63;
}
.attachment-container .upload-con .upload-right[data-v-3b0672ec] {
  width: calc( 100% - 88px);
}
.attachment-container .upload-con .upload-right .attachment-name[data-v-3b0672ec] {
  width: calc(100% - 56px);
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.attachment-container .upload-con .upload-right .attachment-name2[data-v-3b0672ec] {
  width: calc(100% - 28px);
}
.attachment-container .upload-con .upload-right .btn[data-v-3b0672ec] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #E91E63;
  cursor: pointer;
}
.attachment-container .upload-con .upload-right .downbtn[data-v-3b0672ec] {
  color: #03A9F4;
}
.loop-rotate[data-v-3b0672ec] {
  display: inline-block;
  animation: haha1-data-v-3b0672ec 0.8s linear infinite;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
@keyframes haha1-data-v-3b0672ec {
0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(90deg);
}
50% {
    transform: rotate(180deg);
}
75% {
    transform: rotate(270deg);
}
100% {
    transform: rotate(360deg);
}
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-1de2e35a]::after {
  content: '';
  display: block;
  clear: both;
}
.attachment-result-container .attachment-result-title[data-v-1de2e35a] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  padding-bottom: 16px;
}
.attachment-result-container .attachment-list .attachment-item[data-v-1de2e35a] {
  width: 290px;
  height: 40px;
  margin-right: 21px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 16px;
}
.attachment-result-container .attachment-list .attachment-item[data-v-1de2e35a]:nth-child(3n) {
  margin-right: 0px;
}
.nodata[data-v-1de2e35a] {
  padding: 8px;
  text-align: center;
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-933def86]::after {
  content: '';
  display: block;
  clear: both;
}
.gjj-container[data-v-933def86] {
  height: 32px;
  font-size: 0;
  padding: 8px;
  box-sizing: border-box;
  position: relative;
  background: #F8F8F8;
  border-radius: 5px;
}
.gjj-container .i-block[data-v-933def86] {
  display: inline-block;
  vertical-align: middle;
}
.gjj-container .divider[data-v-933def86] {
  height: 8px;
  margin: 0 8px;
}
.gjj-container i[data-v-933def86] {
  font-size: 16px;
  color: #03A9F4;
  margin-right: 8px;
}
.gjj-container span[data-v-933def86] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.gjj-container .abs-slot[data-v-933def86] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-1bb204a5]::after {
  content: '';
  display: block;
  clear: both;
}
.result-block-container .zz-div[data-v-1bb204a5] {
  margin-bottom: 24px;
}
.result-block-container .zz-div .zzpf[data-v-1bb204a5] {
  display: inline-block;
  padding: 4px 24px;
  box-sizing: border-box;
  background: #8BC34A;
  border-radius: 10px 0 10px 0;
}
.result-block-container .zz-div .zzpf span[data-v-1bb204a5]:nth-child(1) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #FFFFFF;
  display: inline-block;
  vertical-align: bottom;
  padding-bottom: 2px;
}
.result-block-container .zz-div .zzpf span[data-v-1bb204a5]:nth-child(2) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  color: #FFFFFF;
  margin-left: 8px;
  display: inline-block;
  vertical-align: bottom;
}
.result-block-container .result-down[data-v-1bb204a5] {
  font-size: 0;
  padding-bottom: 24px;
}
.result-block-container .result-down .iblock[data-v-1bb204a5] {
  display: inline-block;
  vertical-align: middle;
}
.result-block-container .result-down .result-state[data-v-1bb204a5] {
  width: calc( 100% - 292px);
  font-size: 0;
}
.result-block-container .result-down .result-state .state-block[data-v-1bb204a5] {
  display: inline-block;
  vertical-align: middle;
  padding-left: 24px;
  position: relative;
}
.result-block-container .result-down .result-state .state-block .abs-state-img[data-v-1bb204a5] {
  position: absolute;
  top: -3px;
  left: -32px;
  width: 50px;
  height: 38px;
  background-image: url(/./assets/assets_course_tool_task_submited-tag.png);
  background-position: center;
  background-size: cover;
}
.result-block-container .result-down .result-state .state-block .abs-state-img-sub[data-v-1bb204a5] {
  background-image: url(/./assets/assets_course_tool_task_submited-tag.png);
}
.result-block-container .result-down .result-state .state-block .abs-state-img-un[data-v-1bb204a5] {
  background-image: url(/./assets/assets_course_tool_task_unsubmited-tag.png);
}
.result-block-container .result-down .result-state .state-block .abs-state-img-yes[data-v-1bb204a5] {
  background-image: url(/./assets/assets_course_tool_task_yes-submited-tag.png);
}
.result-block-container .result-down .result-state .state-block .state-title[data-v-1bb204a5] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #8BC34A;
  margin-bottom: 4px;
}
.result-block-container .result-down .result-state .state-block .state-title-no[data-v-1bb204a5] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #E91E63;
  margin-bottom: 4px;
}
.result-block-container .result-down .result-state .state-block .state-title-yes[data-v-1bb204a5] {
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  color: #FFC107;
  margin-bottom: 4px;
}
.result-block-container .result-down .result-state .state-block .state-note-title[data-v-1bb204a5] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}
.result-block-container .result-down .result-state .divider[data-v-1bb204a5] {
  display: inline-block;
  vertical-align: middle;
  height: 38px;
  margin: 0 24px;
}
.result-block-container .result-down .result-state .state-gjj[data-v-1bb204a5] {
  display: inline-block;
  vertical-align: middle;
  width: 320px;
}
.result-block-container .result-down .result-state .state-gjj .succ[data-v-1bb204a5] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  color: #8BC34A;
  padding-right: 8px;
}
.result-block-container .result-down .result-btns[data-v-1bb204a5] {
  width: 292px;
  text-align: right;
}
.result-block-container .result-down .result-btns .btn[data-v-1bb204a5] {
  display: inline-block;
  vertical-align: middle;
}
.result-block-container .result-down .result-btns .upload-btn[data-v-1bb204a5] {
  width: 96px;
}
.result-block-container .result-down .result-btns .max-btn[data-v-1bb204a5] {
  margin-left: 16px;
  width: 180px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-0890f71e]::after {
  content: '';
  display: block;
  clear: both;
}
.student-task-container[data-v-0890f71e] {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 20px;
  border-radius: 10px;
}
.student-task-container .task-state[data-v-0890f71e] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #03A9F4;
}
.student-task-container .task-state-note[data-v-0890f71e] {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  color: #9E9E9E;
}
.student-task-container .task-markdown[data-v-0890f71e] {
  padding: 0 24px;
  box-sizing: border-box;
}
.student-task-container .task-markdown .task-markdown-title[data-v-0890f71e] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  padding-top: 24px;
}
.student-task-container .task-markdown .markdown p[data-v-0890f71e] {
  padding: 0 !important;
}
.student-task-container .task-markdown .markdown p[data-v-0890f71e]:hover {
  background: transparent !important;
}
.student-task-container .task-result[data-v-0890f71e] {
  padding: 0 24px;
  padding-top: 24px;
  box-sizing: border-box;
}
.student-task-container .date-not-template[data-v-0890f71e] {
  font-size: 0;
  text-align: center;
  padding: 16px 0;
}
.student-task-container .date-not-template i[data-v-0890f71e] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
  color: #E91E63;
}
.student-task-container .date-not-template span[data-v-0890f71e] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  padding-left: 8px;
}
#markdown-container[data-v-0890f71e] .v-note-wrapper {
  min-height: 120px;
}
#markdown-container[data-v-0890f71e] .v-note-panel {
  border: none;
  position: relative;
  z-index: 1;
}
#markdown-container[data-v-0890f71e] .v-show-content {
  background: transparent;
}
#markdown-container[data-v-0890f71e] .v-show-content video {
  max-width: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-72556130]::after {
  content: '';
  display: block;
  clear: both;
}
.task-group-container[data-v-72556130] {
  padding-top: 32px;
}
.task-group-container .task-group-name[data-v-72556130] {
  font-size: 24px;
  line-height: 24px;
  font-weight: normal;
  padding-bottom: 8px;
}
.task-group-container .task[data-v-72556130] {
  margin-top: 24px;
  overflow: inherit;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-79ad1b46]::after {
  content: '';
  display: block;
  clear: both;
}
.task-details-container .content[data-v-79ad1b46] {
  width: 960px;
  margin: 0 auto;
  /* 无任务单状态 */
  /* 有任务单状态 */
}
.task-details-container .content .task-details-title[data-v-79ad1b46] {
  padding-top: 32px;
}
.task-details-container .content .task-details-title p[data-v-79ad1b46]:nth-child(1) {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  margin-bottom: 8px;
}
.task-details-container .content .task-details-title p[data-v-79ad1b46]:nth-child(2) {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-e36fe1ec]::after {
  content: '';
  display: block;
  clear: both;
}
.task-date-form-container[data-v-e36fe1ec] {
  border-right: 1px solid #E8E8E8;
  box-sizing: border-box;
}
.task-date-form-container .task-datemenu-title[data-v-e36fe1ec] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
  padding-bottom: 24px;
}
.task-date-form-container .note-title[data-v-e36fe1ec] {
  color: #9E9E9E;
  font-size: 12px;
  line-height: 12px;
  font-weight: normal;
  text-align: center;
  padding-top: 16px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-22a4147b]::after {
  content: '';
  display: block;
  clear: both;
}
.tool-task-container[data-v-22a4147b] {
  font-size: 0;
  box-sizing: border-box;
  padding-top: 32px;
}
.task-date[data-v-22a4147b] {
  width: 320px;
  display: inline-block;
  vertical-align: top;
}
.task-details[data-v-22a4147b] {
  width: calc(100% - 320px);
  display: inline-block;
  vertical-align: top;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-4a7cc2cb]::after {
  content: '';
  display: block;
  clear: both;
}
.attachment[data-v-4a7cc2cb] {
  font-size: 0;
}
.attachment .attachment-type[data-v-4a7cc2cb] {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background-position: center;
  background-size: cover;
}
.attachment .attachment-name[data-v-4a7cc2cb] {
  width: calc( 100% - 32px);
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  padding-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 24px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-5d718a94]::after {
  content: '';
  display: block;
  clear: both;
}
.image-preview[data-v-5d718a94] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.image-preview img[data-v-5d718a94] {
  max-width: 100%;
  max-height: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-52a94e00]::after {
  content: '';
  display: block;
  clear: both;
}
.video-preview[data-v-52a94e00] {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.video-preview video[data-v-52a94e00] {
  max-width: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-0ce7f1a7]::after {
  content: '';
  display: block;
  clear: both;
}
.code-preview[data-v-0ce7f1a7] {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  font-size: 16px;
  line-height: 22px;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-69738638]::after {
  content: '';
  display: block;
  clear: both;
}
.markdown-preview[data-v-69738638] {
  width: 100%;
  height: 100%;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-02f95971]::after {
  content: '';
  display: block;
  clear: both;
}
.other-null[data-v-02f95971] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}
.other-null img[data-v-02f95971] {
  width: 156px;
  height: 156px;
}
.other-null .null-text[data-v-02f95971] {
  padding-top: 56px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.other-null .null-text span[data-v-02f95971] {
  color: #03A9F4;
  cursor: pointer;
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-2825b787]::after {
  content: '';
  display: block;
  clear: both;
}
.preview-container[data-v-2825b787] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 960px;
}
.preview-container .circle-btn[data-v-2825b787] {
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  position: absolute;
  background: rgba(68, 68, 68, 0.2);
  width: 48px;
  height: 48px;
  border-radius: 48px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.preview-container .circle-btn i[data-v-2825b787] {
  color: #FFFFFF;
  font-size: 24px;
}
.preview-container .circle-btn[data-v-2825b787]:hover {
  background: rgba(68, 68, 68, 0.6);
}
.preview-container .left-btn[data-v-2825b787] {
  left: 25%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.preview-container .right-btn[data-v-2825b787] {
  left: 75%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.preview-container .rect-btn[data-v-2825b787] {
  position: absolute;
  background: rgba(68, 68, 68, 0.8);
  border-radius: 10px;
}
.preview-container .option-btn[data-v-2825b787] {
  top: 75%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0);
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  padding: 16px 64px;
  font-size: 0;
}
.preview-container .option-btn .iblock[data-v-2825b787] {
  display: inline-block;
  vertical-align: middle;
}
.preview-container .option-btn .iblock i[data-v-2825b787] {
  font-size: 24px;
  cursor: pointer;
  color: #FFFFFF;
}
.preview-container .option-btn .divider[data-v-2825b787] {
  margin: 6px 32px;
  color: #FFFFFF;
  height: 12px;
}
.preview-container .option-btn-max[data-v-2825b787] {
  transform: translateX(-50%) translateY(-50%) scale(1);
}

/**
 * 基于 Change Newborn 设计规范
 * @author 佐伯楽
 * @date 2018-08-28
 * /

/**** Less库编写规范 ****/
/**** 快捷变量 ****/
/**** 颜色 ****/
/**** 布局 ****/
/**** 文字 ****/
/**** 样式 ****/
/**** 贝塞尔曲线 ****/
/**** 响应式 ****/
/**** 工具 ****/
.clearfloat[data-v-0dbbe837]::after {
  content: '';
  display: block;
  clear: both;
}
.online-preview-files-container[data-v-0dbbe837] {
  width: 100%;
}
.online-preview-files-container .online-preview-files-head[data-v-0dbbe837] {
  width: 100%;
  font-size: 0;
  height: 80px;
}
.online-preview-files-container .online-preview-files-head .head-back-left[data-v-0dbbe837] {
  width: 320px;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  padding: 24px 32px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
}
.online-preview-files-container .online-preview-files-head .head-back-left .iblock[data-v-0dbbe837] {
  display: inline-block;
  vertical-align: middle;
}
.online-preview-files-container .online-preview-files-head .head-back-left .back-div[data-v-0dbbe837] {
  width: 32px;
  height: 32px;
  background: #444444;
  line-height: 32px;
  text-align: center;
  border-radius: 32px;
}
.online-preview-files-container .online-preview-files-head .head-back-left .back-div i[data-v-0dbbe837] {
  font-size: 16px;
  color: #FFFFFF;
}
.online-preview-files-container .online-preview-files-head .head-back-left .divider[data-v-0dbbe837] {
  height: 24px;
  margin: 0 24px;
}
.online-preview-files-container .online-preview-files-head .head-back-left .head-title[data-v-0dbbe837] {
  font-size: 24px;
  line-height: 24px;
  font-weight: bolder;
}
.online-preview-files-container .online-preview-files-head .head-back-right[data-v-0dbbe837] {
  width: calc( 100% - 320px);
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  padding: 20px 64px;
  box-sizing: border-box;
}
.online-preview-files-container .online-preview-files-head .head-back-right .iblock[data-v-0dbbe837] {
  display: inline-block;
  vertical-align: middle;
}
.online-preview-files-container .online-preview-files-head .head-back-right .cover[data-v-0dbbe837] {
  width: 88px;
  font-size: 0;
}
.online-preview-files-container .online-preview-files-head .head-back-right .cover img[data-v-0dbbe837] {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
}
.online-preview-files-container .online-preview-files-head .head-back-right .cover span[data-v-0dbbe837] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 24px;
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  line-height: 32px;
}
.online-preview-files-container .online-preview-files-head .head-back-right .fileName[data-v-0dbbe837] {
  width: calc( 100% - 88px - 160px);
  font-size: 14px;
  line-height: 14px;
  font-weight: bold;
  text-align: center;
}
.online-preview-files-container .online-preview-files-head .head-back-right .download-btn[data-v-0dbbe837] {
  width: 160px;
}
.online-preview-files-container .online-preview-files-head .head-back-right .download-btn .nb-button[data-v-0dbbe837] {
  width: 100%;
  height: 40px;
}
.online-preview-files-container .online-preview-files-main[data-v-0dbbe837] {
  width: 100%;
  height: calc( 100vh - 80px - 80px - 140px);
  font-size: 0;
}
.online-preview-files-container .online-preview-files-main .files-list[data-v-0dbbe837] {
  padding-top: 16px;
  padding-bottom: 16px;
  width: 320px;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  overflow-y: auto;
}
.online-preview-files-container .online-preview-files-main .files-list .attachment-item[data-v-0dbbe837] {
  padding: 8px 32px;
  box-sizing: border-box;
  -webkit-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -moz-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  -o-transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  transition: all 300ms cubic-bezier(0.02, 0.86, 0.25, 0.97);
  cursor: pointer;
  margin-bottom: 8px;
}
.online-preview-files-container .online-preview-files-main .files-list .attachment-item-active[data-v-0dbbe837] {
  background: #F8F8F8;
}
.online-preview-files-container .online-preview-files-main .files-list .attachment-item[data-v-0dbbe837]:hover {
  background: #F8F8F8;
}
.online-preview-files-container .online-preview-files-main .files-preview[data-v-0dbbe837] {
  width: calc( 100% - 320px);
  height: 100%;
  display: inline-block;
  vertical-align: top;
  background: #F8F8F8;
}

